Animate Keyframes Progress Bar / Элементы / Сниппеты Bootstrap

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

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

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress

Язык: Английский

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

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

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

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

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

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

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

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

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

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

Теги: css, Snippet, Progress, keyframes, сниппет, Bootstrap, element, Responsive, элемент, адаптивные

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

Добавлено: 2017-03-19 в 10:02

Метка: 1489906964

⇄ ⇅

/* Progress Style */
.progress-title{
 font-size: 18px;
 font-weight: 700;
 color: #000;
 margin: 0 0 20px;
}
.progress{
 height: 3px;
 background: #8e44ad;
 border-radius: 0;
 margin-bottom: 30px;
 overflow: visible;
 box-shadow: none;
 position: relative;
}
.progress .progress-bar{
 height:8px;
 position: relative;
 top: -3px;
 box-shadow: none;
 animation: animate-positive 2s;
}
.progress .progress-value{
 display: block;
 font-size: 18px;
 font-weight: bold;
 color: #000;
 position: absolute;
 top: -30px;
 right: 5px;
}
.progress.pink{
 background: #d01d4c;
}
.progress.green{
 background: #248075;
}
.progress.yellow{
 background: #faa916;
}
@-webkit-keyframes animate-positive{
 0% { width: 0%; }
}
@keyframes animate-positive{
 0% { width: 0%; }
}
</style>

<h4 class="progress-title">jQuery</h4>
 <div class="progress yellow">
 <div class="progress-bar" style="width:35%; background:#faa916;">
 <div class="progress-value">35%</div>
 </div>
 </div>

</div>

</div>
</div>

BootstrapTema

Animate Keyframes Progress Bar

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0