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

1
2
3
4
5

Версия: v1.0

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

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

Bootstrap: 3, 4

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

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

Вес файла: 1.7 Kb

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

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

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

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

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

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

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

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

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

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

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

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

Теги: css, Responsive, preloader, Snippet, html, Bootstrap, element

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

Добавлено: 2016-07-18 в 15:35

Метка: 1581113906

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/bootstrap/v3/3-3-6/bootstrap.css" />

<style>
.load-bar {
 position: relative;
 margin-top: 20px;
 width: 100%;
 height: 6px;
 background-color: #fdba2c;
}
.bar {
 content: "";
 display: inline;
 position: absolute;
 width: 0;
 height: 100%;
 left: 50%;
 text-align: center;
}
.bar:nth-child(1) {
 background-color: #da4733;
 animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
 background-color: #3b78e7;
 animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
 background-color: #fdba2c;
 animation: loading 3s linear 2s infinite;
}
@keyframes loading {
 from {left: 50%; width: 0;z-index:100;}
 33.3333% {left: 0; width: 100%;z-index: 10;}
 to {left: 0; width: 100%;}
}
</style>

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">

<h2>Google Material Design Preloader</h2>

<div class="load-bar">
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
</div>

</div>
</div>
</div>