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

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

Авторство: http://goo.gl/z9vpMF

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

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

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

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

Добавлено: 2016-05-30 в 16:33

Метка: 1581148124

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>
.loader{
 width: 50px;
 height: 50px;
 margin: 30px auto 40px;
 position: relative;
}
.loader:before{
 content: "";
 width: 50px;
 height: 5px;
 border-radius: 50%;
 background: #000;
 opacity: 0.1;
 position: absolute;
 top: 59px;
 left: 0;
 animation: shadow .5s linear infinite;
}
.loader:after{
 content: "";
 width: 50px;
 height: 50px;
 border-radius: 3px;
 background: #008bba;
 position: absolute;
 top: 0;
 left: 0;
 animation: loading .5s linear infinite;
}
@-webkit-keyframes loading{
 17% {
 border-bottom-right-radius: 3px;
 }
 25% {
 transform: translateY(9px) rotate(22.5deg);
 }
 50% {
 transform: translateY(18px) scale(1, 0.9) rotate(45deg);
 border-bottom-right-radius: 40px;
 }
 75% {
 transform: translateY(9px) rotate(67.5deg);
 }
 100% {
 transform: translateY(0) rotate(90deg);
 }
}
@keyframes loading{
 17% {
 border-bottom-right-radius: 3px;
 }
 25% {
 transform: translateY(9px) rotate(22.5deg);
 }
 50% {
 transform: translateY(18px) scale(1, 0.9) rotate(45deg);
 border-bottom-right-radius: 40px;
 }
 75% {
 transform: translateY(9px) rotate(67.5deg);
 }
 100% {
 transform: translateY(0) rotate(90deg);
 }
}
@-webkit-keyframes shadow{
 0%,
 100% {
 transform: scale(1, 1);
 }
 50% {
 transform: scale(1.2, 1);
 }
}
@keyframes shadow{
 0%,
 100% {
 transform: scale(1, 1);
 }
 50% {
 transform: scale(1.2, 1);
 }
}
</style>

<div class="container">
 <div class="row">

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

</div>
</div>