Linear Gradient Progress Bar / Элементы / Сниппеты Bootstrap

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

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

Для Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/4PcTi7

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

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

Теги: Snippet, Progress, linear-gradient, Bootstrap, element, Responsive, элемент, html, адаптивные

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

Добавлено: 2017-02-17 в 00:52

Метка: 1487281927

⇄ ⇅

.progress{
 background: #262626;
 border-radius: 20px;
 height: 20px;
 border-top: 1px solid #000;
 box-shadow: 0 5px 4px -6px #aaa;
 margin-top: 50px;
 overflow: visible;
 }
 .progress .progress-bar{
 border-radius: 20px;
 position: relative;
 animation: animate-positive 2s;
 }
 .progress .progress-bar:after{
 content: "\f111";
 font-family: fontawesome;
 font-size: 10px;
 color: rgba(0,0,0,0.4);
 position: absolute;
 top: -1px;
 right: 10px;
 }
 .progress .progress-value{
 display: block;
 font-size: 13px;
 color: #fff;
 border-radius: 4px;
 padding: 3px 8px;
 background:#191919;
 position: absolute;
 top: -40px;
 right: -27px;
 }
 .progress .progress-value:after{
 content: "";
 border-top: 5px solid #191919;
 border-left: 5px solid #191919;
 border-bottom: 5px solid transparent ;
 border-right: 5px solid transparent;
 position: absolute;
 bottom: -6px;
 left: 0;
 }
 @-webkit-keyframes animate-positive{
 0% { width: 0%; }
 }
 @keyframes animate-positive{
 0% { width: 0%; }
 }
</style>

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

BootstrapTema

Linear Gradient Progress Bar

Скриншот

Подробнее

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

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

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