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

Версия: v1.0.0

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

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

Bootstrap: 3, 4

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

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

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

Вес файла: 0.6 Kb

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

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

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

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

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

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

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

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

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

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

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

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

Теги: Loader, вращающийся прелоадер, прелоадер, лоадер, preloader

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

Добавлено: 2018-12-24 в 15:20

Метка: 1545654008

⇄ ⇅

to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
@keyframes spiner-animation {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }

to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
.spiner {
 width: 68px;
 height: 68px;
 border: 2px solid #ff3068;
 margin: -34px 0 0 -34px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-animation: spiner-animation 2.6s linear infinite;
 animation: spiner-animation 2.6s linear infinite;
}
.spiner:before,
.spiner:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 border: 2px solid #ff3068;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-animation: spiner-animation 1.3s linear infinite;
 animation: spiner-animation 1.3s linear infinite;
 -webkit-animation-direction: reverse;
 animation-direction: reverse;
}
.spiner:before {
 width: 48px;
 height: 48px;
 margin: -24px 0 0 -24px;
}
.spiner:after {
 width: 96px;
 height: 96px;
 margin: -48px 0 0 -48px;
}
</style>

BootstrapTema

Прелоадер вращающихся кубиков

Скриншот

Подробнее

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

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

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