Показать загрузчик внутри карты bootstrap

Я использую карту Bootstrap для создания приборной панели. Поскольку каждая карта имеет индивидуальную загрузку данных через ajax, я хочу показать загрузчик внутри конкретной карты, на которую загружаются данные. Ниже мой код

<div class="main-panel">
    <div class="content">
        <div class="container-fluid">
            <div class="row">

                <div class="col-lg-6">
                    <div class="card ">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                    </div>
                    <div id="bidStatusLoader" style='display:none' class="animationload">
                        <div class="osahanloading"></div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="card ">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<input id="clickMe" type="button" value="clickme" />

Вот сценарий

 $(document).ready(function(){
    $('#clickMe').click(function(){
       ShowModal();
    });
  });

function ShowModal()
{
  //This will be an ajax call.Show Modal during call
  $("#bidStatusLoader").show();

}

При нажатии кнопки выполняется некоторая операция ajax, и до этого момента я хочу показать загрузчик внутри карты, но не знаю, как это сделать.

Вот Ссылка на скрипку

Используя загрузчик отсюда https://bootsnipp.com/snippets/featured/creative-animated-loading-icon-in-html5-css3

Я действительно не понимаю, в чем проблема. Не могли бы вы объяснить немного лучше?

Serg Chernata 13.09.2018 20:21

Конечно, если вы посмотрите на скрипку и нажмете кнопку clickMe, я хочу, чтобы загрузчик поднялся в центре первой карты. Данные на каждой карте будут обновляться отдельно, поэтому я хочу предоставить загрузчик внутри карты во время загрузки данных.

SP1 13.09.2018 20:25

Прямо сейчас загрузчик все прячет и загружается на главную страницу .. Я просто хочу, чтобы это было внутри первой карты.

SP1 13.09.2018 20:27

Я думаю, вам не хватает фактического класса. В настоящее время у вас есть просто стиль :: after для этого класса. Здесь исправлено -> jsfiddle.net/qozvga1r/6

meteor 13.09.2018 20:28

Можете ли вы также сказать мне, как я могу заблокировать пользовательский интерфейс карты также, когда загрузчик загружен.

SP1 13.09.2018 20:40
0
5
1 246
0

Другие вопросы по теме