Прелоадер фотоаппарат / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

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

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

Для Bootstrap: 3, 4

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

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

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

Вес файла: 6.9 Kb

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

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

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

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

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

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

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

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

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

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

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

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

Теги: прелоадер, preloader, Snippet, Loader, Bootstrap

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

Добавлено: 2018-03-21 в 11:16

Метка: 1521620161

⇄ ⇅

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
#bt-preloader {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10000;
 position: fixed;
 background: #fff;
}
.bt-preloadericon {
 top: 50%;
 left: 50%;
 z-index: 1;
 width: 120px;
 height: 90px;
 position: absolute;
 margin: -45px 0 0 -60px;
 background: url(//bootstraptema.ru/snippets/element/2018/bgcamera1.png) no-repeat;
}
.bt-preloadericon:after {
 top: 25px;
 right: 23px;
 content: '';
 width: 50px;
 height: 50px;
 position: absolute;
 -webkit-animation: rotating 1.5s linear infinite;
 -moz-animation: rotating 1.5s linear infinite;
 -ms-animation: rotating 1.5s linear infinite;
 -o-animation: rotating 1.5s linear infinite;
 animation: rotating 1.5s linear infinite;
 background: url(//bootstraptema.ru/snippets/element/2018/bgcamera2.png) no-repeat;
}
@-webkit-keyframes rotating {
 from {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 to {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
@keyframes rotating {
 from {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 to {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}

</style>

<div id="bt-preloader"><div class="bt-preloadericon"></div></div>