Preloader Flex CSS Animation / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Для Bootstrap: 3, 4

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

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

Вес файла: 0.6 Kb

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

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

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

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

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

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

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

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

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

Авторство: //goo.gl/X7NzfZ

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

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

Теги: flex, лоадер, прелоадер, flex css, Loader, bestjquery, preloader

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

Добавлено: 2018-12-05 в 17:20

Метка: 1544019636

⇄ ⇅

<style>
body{
background: #0f0c29;
background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
}
 
.preloader{
 height: 100%;
 width: 100%;
 padding: 20px 0 20px;
 display: flex;
 flex-flow: column wrap;
 justify-content: center;
 align-content: center;
 align-items: center;
 perspective: 700;
}
.loader{
 text-align: center;
 margin: 5px;
 border-radius: 50%;
 border: 4px solid #fff;
 display: flex;
 flex-flow: column wrap;
 justify-content: center;
 align-content: center;
 align-items: center;
 transform-style: preserve-3d;
 position: relative;
}
.loader-inner-1{
 animation-delay: 0.2s;
 animation: change_first_circle 2s ease-in-out infinite;
}
.loader-inner-2{
 animation-delay: 0.2s;
 animation: change_second_circle 2s ease-in-out infinite;
}
.loader-inner-3{
 animation-delay: 0.2s;
 width: 100px;
 height: 100px;
 animation: change_last_circle 3s linear infinite;
}
@keyframes change_first_circle {
 50%{ transform: rotateX(360deg) scale(0.8); }
}
@keyframes change_second_circle {
 50%{ transform: rotateY(360deg) scale(0.8); }
}
@keyframes change_last_circle {
 50%{ transform: rotateX(360deg) scale(0.8); }
}
</style>

<div class="preloader">
 <div class="loader loader-inner-1">
 <div class="loader loader-inner-2">
 <div class="loader loader-inner-3">
 </div>
 </div>
 </div>
</div>