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

1
2
3
4
5

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2018-01-08 в 17:29

Метка: 1515421758

⇄ ⇅

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
#preloader {
 background: #fff;
 top: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 left: 0;
 position: fixed;
 z-index: 999;
}
#preloader > .clock > div {
 background-color: #6259cc;
 border-color: #6259cc;
}
.clock {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 40px;
 height: 40px;
 margin: -20px 0 0 -20px;
 border-width: 1px;
 border-style: solid;
 border-radius: 50%;
 background-color: transparent!important;
}
.clock .arrow_sec {
 position: absolute;
 height: 15px;
 width: 1px;
 top: 50%;
 left: 50%;
 margin: -15px 0 0 -1px;
 -webkit-animation: rotation 1s linear 0s infinite;
 animation: rotation 1s linear 0s infinite;
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 border-color: transparent!important;
}
.clock .arrow_min {
 position: absolute;
 height: 10px;
 width: 1px;
 top: 50%;
 left: 50%;
 margin: -10px 0 0 -1px;
 -webkit-animation: rotation 6s linear 0s infinite;
 animation: rotation 6s linear 0s infinite;
 -webkit-transform-origin: center bottom;
 transform-origin: center bottom;
 border-color: transparent!important;
}
@-webkit-keyframes rotation {
 0% {
 -webkit-transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(360deg);
 }
}
@keyframes rotation {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
</style>

<div id="preloader"><div class="clock"><div class="arrow_sec"></div><div class="arrow_min"></div></div></div>

<script>
$(window).load(function () {

$("#preloader").delay(1400).fadeOut("slow", function() {
});

});
</script>