Прелоадер в виде часов / Элементы / Сниппеты 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: 3225

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

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

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

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

Подбери: Домен для сайта

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

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

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

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

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

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

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

Теги: анимированный прелоадер, preloader, Loader, прелоадер

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

Добавлено: 2018-12-24 в 16:03

Метка: 1545656618

⇄ ⇅

<style>
.preloader {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: transparent;
 }
.timer{
 width: 70px;
 height: 70px;
 background-color: #fff;
 box-shadow: inset 0px 0px 0px 2px #000;
 border-radius: 50%;
 position: absolute;
 margin: auto;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0; 
 }
.timer:after, .timer:before{
 position: absolute;
 content:"";
 background-color: #000;
}
.timer:after{
 width: 27px;
 height: 2px;
 top: 33px;
 left: 33px;
 -webkit-transform-origin: 1px 1px;
 -moz-transform-origin: 1px 1px;
 transform-origin: 1px 1px;
 -webkit-animation: timer-animation 2s linear infinite;
 -moz-animation: timer-animation 2s linear infinite;
 animation: timer-animation 2s linear infinite;
}
.timer:before{
 width: 30px;
 height: 2px;
 top: 33px;
 left: 33px;
 -webkit-transform-origin: 1px 1px;
 -moz-transform-origin: 1px 1px;
 transform-origin: 1px 1px;
 -webkit-animation: hrhand 8s linear infinite;
 -moz-animation: hrhand 8s linear infinite;
 animation: hrhand 8s linear infinite;
}
@-webkit-keyframes timer-animation{
 0%{-webkit-transform:rotate(0deg)}
 100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes timer-animation{
 0%{-moz-transform:rotate(0deg)}
 100%{-moz-transform:rotate(360deg)}
}
@keyframes timer-animation{
 0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
@-webkit-keyframes hrhand{
 0%{-webkit-transform:rotate(0deg)}
 100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
 0%{-moz-transform:rotate(0deg)}
 100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
 0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
</style>

<div class="preloader">
 <div class="timer"></div>
</div>