Preloader Вертушка / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/HmMXVg

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

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

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

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

Добавлено: 2018-01-27 в 18:49

Метка: 1517068171

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<style>
.loader{ overflow: hidden; }
.loader .loader-inner{
 width: 260px;
 height: 260px;
 background: #77379a;
 border-radius: 100% 0 100% 0;
 padding: 15px;
 margin: 64px auto;
 box-sizing: border-box;
 position: relative;
 animation: loading-1 10s linear forwards infinite;
}
.loader .loader-inner:before{
 content: "";
 background: #fff;
 border-radius: 0 100% 0 100%;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}
.loader .loader-inner > .loader-inner{
 width: 100%;
 height: 100%;
 margin: 0;
}
@keyframes loading-1{
 0%{ transform: rotate(0deg); }
 100%{ transform: rotate(360deg); }
}
</style>

<div class="container">

<div class="loader">
 <div class="loader-inner">
 <div class="loader-inner">
 <div class="loader-inner">
 <div class="loader-inner">
 <div class="loader-inner">
 <div class="loader-inner">
 <div class="loader-inner">
 <div class="loader-inner"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

</div>