Пульсирующий круглый прелоадер / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4

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

Язык: Русский

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

Количество символов:

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

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

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

Рейтинг: 4.8 / 5 - 4 голосов

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

Авторство: Посмотреть

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

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

Теги: прелоадер, Bootstrap, Loader, preloader, элемент, element

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

Добавлено: 2018-02-28 в 18:03

Метка: 1519830217

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<style>
.site-preloader-wrap {
 background: #fff none repeat scroll 0 0;
 height: 100%;
 position: fixed;
 width: 100%;
 z-index: 99999;
}
.site-preloader-wrap .cssload-loader {
 left: 50%;
 margin: -75px 0 0 -75px;
 position: absolute;
 top: 50%;
 width: 146px;
 height: 146px;
 line-height: 146px;
 box-sizing: border-box;
 text-align: center;
 z-index: 0;
 text-transform: uppercase;
 -o-text-transform: uppercase;
 -ms-text-transform: uppercase;
 -webkit-text-transform: uppercase;
 -moz-text-transform: uppercase;
}
.cssload-loader:before,
.cssload-loader:after {
 opacity: 0;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 content: "\0020";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 97px;
 border: 5px solid rgb(0,41,155);
 box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -o-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -ms-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -webkit-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -moz-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
}
.cssload-loader:after {
 z-index: 1;
 animation: cssload-gogoloader 2.3s infinite 1.15s;
 -o-animation: cssload-gogoloader 2.3s infinite 1.15s;
 -ms-animation: cssload-gogoloader 2.3s infinite 1.15s;
 -webkit-animation: cssload-gogoloader 2.3s infinite 1.15s;
 -moz-animation: cssload-gogoloader 2.3s infinite 1.15s;
}
.cssload-loader:before {
 z-index: 2;
 animation: cssload-gogoloader 2.3s infinite;
 -o-animation: cssload-gogoloader 2.3s infinite;
 -ms-animation: cssload-gogoloader 2.3s infinite;
 -webkit-animation: cssload-gogoloader 2.3s infinite;
 -moz-animation: cssload-gogoloader 2.3s infinite;
}
@keyframes cssload-gogoloader {
 0% {
 transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 transform: scale(1);
 opacity: 0;
 }
}
@-o-keyframes cssload-gogoloader {
 0% {
 -o-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -o-transform: scale(1);
 opacity: 0;
 }
}
@-ms-keyframes cssload-gogoloader {
 0% {
 -ms-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -ms-transform: scale(1);
 opacity: 0;
 }
}
@-webkit-keyframes cssload-gogoloader {
 0% {
 -webkit-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -webkit-transform: scale(1);
 opacity: 0;
 }
}
@-moz-keyframes cssload-gogoloader {
 0% {
 -moz-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -moz-transform: scale(1);
 opacity: 0;
 }
}
</style>

<div class="container-fluid">

<div class="site-preloader-wrap">
 <div class="cssload-loader"></div>
 </div>

</div>