Прелоадер Square / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4

Дополнение: Смотреть

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

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

Вес файла: 0.7 Kb

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

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

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

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

Прикреплён файл №2: /stuff/0-0-0-3242-20

Подбери: Домен для сайта

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

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

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

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

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

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

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

Теги: preloader jquery, preloader css, анимированный прелоадер, прелоадер, preloader, css preloader, jquery preloader

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

Добавлено: 2018-12-30 в 19:21

Метка: 1546186895

⇄ ⇅

<style>
.loader {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 bottom: 0;
 z-index: 99999;
 background: #f5f5f5;
}
.square {
 position: absolute;
 top: 45%;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 10;
 width: 90px;
 height: 90px;
 perspective: 600px;
 transform-type: preserve-3d;
 transform-origin: 50% 50%;
}
.square--mini {
 position: absolute;
 top: 0;
 left: 0;
 width: 25%;
 height: 25%;
 margin-top: 0;
 margin-left: 0;
 perspective: 400px;
 transform-type: preserve-3d;
 transform-origin: 50% 50%;
 transform: translateZ(200px) rotateX(20deg) rotateY(-10deg);
 background-color: #1e3f57;
 animation: squaremini 4s cubic-bezier(.38, .04, .38, .99) infinite;
}
.square--mini:nth-child(4n+2) {
 left: 25%;
}
.square--mini:nth-child(4n+3) {
 left: 50%;
}
.square--mini:nth-child(4n+4) {
 left: 75%;
}
.square--mini:nth-child(5),
.square--mini:nth-child(6),
.square--mini:nth-child(7),
.square--mini:nth-child(8) {
 top: 25%;
}
.square--mini:nth-child(9),
.square--mini:nth-child(10),
.square--mini:nth-child(11),
.square--mini:nth-child(12) {
 top: 50%;
}
.square--mini:nth-child(13),
.square--mini:nth-child(14),
.square--mini:nth-child(15),
.square--mini:nth-child(16) {
 top: 75%;
}
.square--mini:nth-child(2),
.square--mini:nth-child(5) {
 animation-delay: 100ms;
}
.square--mini:nth-child(3),
.square--mini:nth-child(6),
.square--mini:nth-child(9) {
 animation-delay: 200ms;
}
.square--mini:nth-child(4),
.square--mini:nth-child(7),
.square--mini:nth-child(10),
.square--mini:nth-child(13) {
 animation-delay: 300ms;
}
.square--mini:nth-child(8),
.square--mini:nth-child(11),
.square--mini:nth-child(14) {
 animation-delay: 400ms;
}
.square--mini:nth-child(12),
.square--mini:nth-child(15) {
 animation-delay: 500ms;
}
.square--mini:nth-child(16) {
 animation-delay: 600ms;
}
@keyframes squaremini {
 0%,
 100% {
 transform: translateZ(200px) rotateX(20deg) rotateY(-10deg) rotateZ(10deg);
 background-color: #1e3f57;
 }
 12.5%,
 62.5% {
 transform: translateZ(0) rotateX(0) rotateY(0);
 background-color: #3c617d;
 }
 25%,
 75% {
 transform: translateZ(200px) rotateX(-20deg) rotateY(10deg) rotateZ(-10deg);
 background-color: #3c617d;
 }
 37.5% {
 transform: translateZ(0) rotateX(0) rotateY(0);
 background-color: #6bb2cd;
 }
 50% {
 transform: translateZ(200px) rotateX(20deg) rotateY(-10deg) rotateZ(5deg);
 background-color: #6bb2cd;
 }
 87.5% {
 transform: translateZ(0) rotateX(0) rotateY(0);
 background-color: #1e3f57;
 }
}
</style>

<div class="loader">
 <div class="square square--main">
 <div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div>
 <div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div>
 <div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div>
 <div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div><div class="square square--mini"></div>
 </div>
</div>