Перелистываемая книга - Прелоадер страницы / Элементы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Для Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

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

Вес файла: 0.8 Kb

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

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

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

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

Прикреплён файл №1: /_sf/60/6023.html

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

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

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

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

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

Авторство: bootstraptema.ru

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

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

Теги: element, прелоадер страницы, preloader, прелоадер, элемент

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

Добавлено: 2023-11-25 в 18:11

Метка: 1700925336

⇄ ⇅

<style>
 .preloader-block {
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 position: relative;
 margin: 0 auto;
 border: 5px solid #ecf0f1;
 width: 100px;
 height: 60px;
 z-index: 99999;
 }

.preloader-list {
 position: absolute;
 left: 50%;
 top: -5px;
 margin: 0 auto;
 border-top: 5px solid #ecf0f1;
 border-bottom: 5px solid #ecf0f1;
 border-right: 5px solid #ecf0f1;
 background: #05417c;
 width: 50px;
 height: 60px;
 -webkit-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-animation: flip 1.2s infinite linear;
 animation: flip 1.2s infinite linear;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 }
 .preloader-list:nth-child(1) {
 z-index: -1;
 -webkit-animation-delay: .2s;
 animation-delay: .2s;
 }
 .preloader-list:nth-child(2) {
 z-index: -2;
 -webkit-animation-delay: .4s;
 animation-delay: .4s;
 }
 .preloader-list:nth-child(3) {
 z-index: -3;
 -webkit-animation-delay: .8s;
 animation-delay: .8s;
 }

@-webkit-keyframes flip {
 0% {
 -webkit-transform: perspective(600px) rotateY(0deg);
 transform: perspective(600px) rotateY(0deg);
 }
 20% {
 background: #002e5b;
 }
 29.9% {
 background: #002e5b;
 }
 30% {
 -webkit-transform: perspective(200px) rotateY(-90deg);
 transform: perspective(200px) rotateY(-90deg);
 background: #002e5b;
 }
 54.999% {
 opacity: 1;
 }
 55% {
 opacity: 0;
 }
 60% {
 -webkit-transform: perspective(200px) rotateY(-180deg);
 transform: perspective(200px) rotateY(-180deg);
 background: #002e5b;
 }
 100% {
 -webkit-transform: perspective(200px) rotateY(-180deg);
 transform: perspective(200px) rotateY(-180deg);
 background: #002e5b;
 }
}

@keyframes flip {
 0% {
 -webkit-transform: perspective(600px) rotateY(0deg);
 transform: perspective(600px) rotateY(0deg);
}
20% {
 background: #002e5b;
}
29.9% {
 background: #002e5b;
}
30% {
 -webkit-transform: perspective(200px) rotateY(-90deg);
 transform: perspective(200px) rotateY(-90deg);
 background: #002e5b;
}
54.999% {
 opacity: 1;
}
55% {
 opacity: 0;
}
60% {
 -webkit-transform: perspective(200px) rotateY(-180deg);
 transform: perspective(200px) rotateY(-180deg);
 background: #002e5b;
}
100% {
 -webkit-transform: perspective(200px) rotateY(-180deg);
 transform: perspective(200px) rotateY(-180deg);
 background: #002e5b;
}
}
#preloader-wrapper {
 position: fixed;
 width: 100%;
 height: 100%;
 background: #002e5b;
 top: 0;
 left: 0;
 z-index: 999999;
}
</style>

<div id="preloader-wrapper">
 <div class="preloader-block">
 <div class="preloader-list"></div>
 <div class="preloader-list"></div>
 <div class="preloader-list"></div>
 </div> 
 </div>

BootstrapTema

Перелистываемая книга - Прелоадер страницы

Скриншот

Подробнее

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

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

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