P-Loading / Улучшение / Плагины Bootstrap

Версия: v1.2.0

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 24.7 Kb

Уникальный ID: 2332

Посмотрели: 1463 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 27 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/joseshiru/p-loading

Информация: Пользователям

Информация: Правообладателям

Теги: Loading, Plugin, preloader, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-08-23 в 11:03

Метка: 1583652554

⇄ ⇅

<div class="col-md-4 default-spinner-example">
 <h4>Default spinner</h4>
 <div class="panel panel-info">
 <div class="panel-heading">Bootstrap: Inline Form</div>
 <div class="panel-body">
 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Remember me
 </label>
 </div>
 <button type="button" class="btn btn-default show-loading">Show Loading</button>
 </form>
 </div>
 </div>
 <p><br/><button class="btn btn-theme hide-loading">Hide</button></p>
 </div>
 
 <div class="col-md-4 font-awesome-spinner-example">
 <h4>Font Awesome spinner</h4>
 <div class="panel panel-info">
 <div class="panel-heading">Bootstrap: Inline Form</div>
 <div class="panel-body">
 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Remember me
 </label>
 </div>
 <button type="button" class="btn btn-default show-loading">Show Loading</button>
 </form>
 </div>
 </div>
 <p><br/><button class="btn btn-theme hide-loading">Hide</button></p>
 </div>
 
 <div class="col-md-4 customized-animations-example">
 <h4>Customize the animations</h4>
 <div class="panel panel-info">
 <div class="panel-heading">Bootstrap: Inline Form</div>
 <div class="panel-body">
 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Remember me
 </label>
 </div>
 <button type="button" class="btn btn-default show-loading">Show Loading</button>
 </form>
 </div>
 </div>
 <p><br/><button class="btn btn-theme hide-loading">Hide</button></p>
 </div>

</div>
</div>

task.defineActions = function () {
 action.setDefaultSpinnerExample = function () {
 var $exampleCont = $('.default-spinner-example');
 var $showLoadingBtn =$exampleCont.find('.show-loading');
 var $hideLoadingBtn =$exampleCont.find('.hide-loading');
 var $panel = $exampleCont.find('.panel');

$showLoadingBtn.on('click.showLoading', function () {
 $panel.ploading({action: 'show'});
 });

$hideLoadingBtn.on('click.showLoading', function () {
 $panel.ploading({action: 'hide'});
 });
 };

action.setFontAwesometSpinnerExample = function () {
 var $exampleCont = $('.font-awesome-spinner-example');
 var $showLoadingBtn =$exampleCont.find('.show-loading');
 var $hideLoadingBtn =$exampleCont.find('.hide-loading');
 var $panel = $exampleCont.find('.panel');

$showLoadingBtn.on('click.showLoading', function () {
 $panel.ploading({
 action: 'show',
 spinnerHTML: '<i></i>',
 spinnerClass: 'fa fa-spinner fa-spin p-loading-fontawesome'
 });
 });

$hideLoadingBtn.on('click.showLoading', function () {
 $panel.ploading({action: 'hide'});
 });
 };

action.setCustomizedAnimationExample = function () {
 var $exampleCont = $('.customized-animations-example');
 var $showLoadingBtn =$exampleCont.find('.show-loading');
 var $hideLoadingBtn =$exampleCont.find('.hide-loading');
 var $panel = $exampleCont.find('.panel');

$showLoadingBtn.on('click.showLoading', function () {
 var customAnimation = function ($container, $selectedNode) {
 $container.fadeIn();
 };

$panel.ploading({
 action: 'show',
 showAnimation: customAnimation
 });
 });

$hideLoadingBtn.on('click.showLoading', function () {
 $panel.ploading({action: 'hide'});
 });
 };
 };

task.runActions = function () {
 action.setDefaultSpinnerExample();
 action.setFontAwesometSpinnerExample();
 action.setCustomizedAnimationExample();
 };

task.initialize = function () {
 task.defineActions();
 task.runActions();
 };

task.initialize();
 })(jQuery);
</script>

BootstrapTema

P-Loading

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0