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

1
2
3
4
5

Версия: v1.0

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

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

Для Bootstrap: 3, 4, 5

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

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

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

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

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

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

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

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

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

Авторство: http://goo.gl/D1S1mj

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

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

Теги: прелоадер, Snippet, сниппет, Bootstrap, element, Responsive, preloader, элемент, html, адаптивные

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

Добавлено: 2016-05-13 в 13:55

Метка: 1581148922

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />

<style>
.loader {
 display: block;
 margin: 30px auto;
 position: relative;
 width: 100px;
 height: 100px;
}
.loader span {
 display: block;
 position: absolute;
 width: 50%;
 height: 50%;
}
.loader span:nth-child(1) {
 top: 0;
 left: 0;
 background-color: #f38630;
 -webkit-animation: loading1 2s linear infinite;
 animation: loading1 2s linear infinite;
}
.loader span:nth-child(2) {
 top: 0;
 right: 0;
 background: #588c73;
 -webkit-animation: loading2 2s linear infinite;
 animation: loading2 2s linear infinite;
}
.loader span:nth-child(3) {
 bottom: 0;
 left: 0;
 background: #9b539c;
 -webkit-animation: loading3 2s linear infinite;
 animation: loading3 2s linear infinite;
}
.loader span:nth-child(4) {
 bottom: 0;
 right: 0;
 background: #d94e67;
 -webkit-animation: loading4 2s linear infinite;
 animation: loading4 2s linear infinite;
}
@-webkit-keyframes loading1 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 z-index: 10;
 }
 25% {
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
 }
 50% {
 -webkit-transform: translate(100%, 100%);
 transform: translate(100%, 100%);
 }
 75% {
 -webkit-transform: translate(0, 100%);
 transform: translate(0, 100%);
 z-index: 0;
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
}
@keyframes loading1 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 z-index: 10;
 }
 25% {
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
 }
 50% {
 -webkit-transform: translate(100%, 100%);
 transform: translate(100%, 100%);
 }
 75% {
 -webkit-transform: translate(0, 100%);
 transform: translate(0, 100%);
 z-index: 0;
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
}
@-webkit-keyframes loading2 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
 25% {
 -webkit-transform: translate(0, 100%);
 transform: translate(0, 100%);
 }
 50% {
 -webkit-transform: translate(-100%, 100%);
 transform: translate(-100%, 100%);
 z-index: 0;
 }
 75% {
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100%, 0);
 z-index: 10;
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
}
@keyframes loading2 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
 25% {
 -webkit-transform: translate(0, 100%);
 transform: translate(0, 100%);
 }
 50% {
 -webkit-transform: translate(-100%, 100%);
 transform: translate(-100%, 100%);
 z-index: 0;
 }
 75% {
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100%, 0);
 z-index: 10;
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
}
@-webkit-keyframes loading3 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
 25% {
 -webkit-transform: translate(0, -100%);
 transform: translate(0, -100%);
 z-index: 10;
 }
 50% {
 -webkit-transform: translate(100%, -100%);
 transform: translate(100%, -100%);
 }
 75% {
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 z-index: 0;
 }
}
@keyframes loading3 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
 25% {
 -webkit-transform: translate(0, -100%);
 transform: translate(0, -100%);
 z-index: 10;
 }
 50% {
 -webkit-transform: translate(100%, -100%);
 transform: translate(100%, -100%);
 }
 75% {
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 z-index: 0;
 }
}
@-webkit-keyframes loading4 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
 25% {
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100%, 0);
 z-index: 0;
 }
 50% {
 -webkit-transform: translate(-100%, -100%);
 transform: translate(-100%, -100%);
 z-index: 10;
 }
 75% {
 -webkit-transform: translate(0, -100%);
 transform: translate(0, -100%);
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
}
@keyframes loading4 {
 0% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
 25% {
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100%, 0);
 z-index: 0;
 }
 50% {
 -webkit-transform: translate(-100%, -100%);
 transform: translate(-100%, -100%);
 z-index: 10;
 }
 75% {
 -webkit-transform: translate(0, -100%);
 transform: translate(0, -100%);
 }
 100% {
 -webkit-transform: translate(0);
 transform: translate(0);
 }
}
</style>

<div class="container">
 <div class="row">
 <div class="col-md-12">
 <div class="loader">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
 </div>
</div>