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

1
2
3
4
5

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

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

Вес файла: 2.0 Kb

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

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

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

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

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

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

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

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

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

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

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

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

Теги: вращение изображения, прелоадер, прелоадер загрузки, preloader, Bootstrap, Loader

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

Добавлено: 2019-01-15 в 14:23

Метка: 1547551410

⇄ ⇅

<style>
.preloader {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #fff;
 z-index: 99999;
 overflow: hidden;
}
.preloader:before {
 content: '';
 position: absolute;
 margin: auto;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 80px;
 height: 80px;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAA3lBMVEVHcEwaKy0YHyslMUcHCwwSGx8gLjkRGhoRFBcMERMaIC1JRYswYlMTGyITHSQMEhdbVrBgxag4dGI+PW5bup4bJzIeLDdjXrxhx6lMnIVbVbZQTJ8+O3kRGR85UlYYIys0MWdaVqxWspc+gW1bvqEdKzdEjHdGUlsbJzBUq5HMyusgLzs1N1RRTZ1DQIVq2Ld9eMVWsJVNooldfYRloY+2tsR6zbR70LbIxuRBSlFpZqBxuaRwt6JVUKEgLjlewqVhXLghMDxlzq9oYsVlYMFiXbxiyKoYJzMaKTQjMj78YlsbAAAAPnRSTlMAKDpMBB7nFgkQMKxedIdM5f9yfNnG2PHuq/7Gi15Bn2vVzonu8Jm3tb1L+Vm4mv7A5L9igxu4rzObj6Kes76VSkQAAAOJSURBVFjD1Zh5d5pAFMUBgWFQEBBx16gx1bq1pmmaLiLDkvD9v1BZEzRRgZlzevr+9vy89703d0Yp6v8vMLz/+SWoIQmYwPR7Svdw6HYPXbeCjRP7Y8dx3UNcTg8TV1k7dgoLy1VYLFzPdg5HZVfjLtA0KI6jq6/iXNeJyh5zSV/pmlYRivFuWrE617EdpVcNq7/KMDitM+Xy47g/sTzHVqo3IqQoln3XPTjVp3mdM0ooz7Vb1Qq81JVFW8s1pVXLDXFK46onbTsRc7QvtOu0Gnn8iPpWu/aZhh3K2+TsONhtO/CKvkCessp/NDvbyaUvrwQ8e11gISi2s9Xp84ML5mFvih0wdofa54hwHPAaRQ8V1JF+xtPGLsELfLXRBJ5poNMvkyM1hDofDWzsOtVyydRBSPtoA92xUA4I2ipi3iVCy22JZcNTQ97kVEzftm9KpzGrq6emQcvpYSR8Dalt7qSDNoNzOwYS7440j+0qhVMaMr3sgWEcR8QChoO+OxrJGvPS7XjqLcg6xn0W1JCJam/RaysCJpBrm94ik6t9CrcmnulxbznDYAPvMp7ZXgtiA8MmpnMWlDU2jxoiU50kh+2h28AH0qpp3iZN/EHgLRmstmmaySv3c5cm8Nj9qprqfQqEJICeaX5LgHhv0wzwdwLsUWQsm48EgdFQvidTJrCG0dqkwIcqASCDMsANgaHUQuBjmq8CPnAaAn+l8QXwgbtga9I9pCr4JwXcBkNRUyAtYgMroWPzPg1EfIV3EfBVGPZQYOT4lkAmZJfG25H72b8IZ4ymxHjDqIOoQlZg9ukQXNSDAYfXQdPLvrQHvGXxZS9nqKunjsHM2u8tA+IIVPVMxIj+PihLxlnqzFspUMiHwP2ynGktWsLJUQaOrEhis1QwAh156OSHBTfbY5gG00Xn9J+sQdTFvV8ntpux6T1PkwIK85hocKSIsBkR/Wax+4A9P0cQEy2jiGvAXFgMGLu2+PyTYQYXs1lIJrOU8u0jK0nXsl6Oif48z7XFzKXrH6rzse2ZfC0pgGzkag2XrI/PS/Aijp/nXbCBESMtXj5nnBnNjAJnCkp8glw2JfF0PgIjG4H8YjcvkAwr7qW1NEZSnaEBFCCgmYE8533fkIpHMVsf8VaiM6glH9bS8n2fH9VLvv5gXW7Onl9enuN6CWrWlOt4rwPArBpPn6J6aqxEQJEtlvoH9RdNz5WZCuG9aQAAAABJRU5ErkJggg==);
 -webkit-animation: spin 2s linear infinite;
 animation: spin 1s linear infinite;
}
 @-webkit-keyframes spin {
 0% {
 -webkit-transform: rotate(0deg); 
 transform: rotate(0deg); 
 }
 100% { 
 -webkit-transform: rotate(360deg); 
 transform: rotate(360deg); 
 }
}
@keyframes spin {
 0% { 
 -webkit-transform: rotate(0deg); 
 transform: rotate(0deg); 
 }
 100% { 
 -webkit-transform: rotate(360deg); 
 transform: rotate(360deg); 
 }
}
.spin {
 -webkit-animation: spin 2s linear infinite;
 animation: spin 1s linear infinite;
}
</style>

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