Bootstrap Progress Bar — стиль 8

Подробное описание и демонстрация работы полосы прогресса под номером №8 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.

Демо Шкалы прогресса — стиль 8

System design 85%
Data analysis 70%
Link-level analysis 60%
html разметка для реализации полосы прогресса

<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="progress_bar_8">
<small class="vc_label">
System design
<span class="vc_label_units">85%</span>
</small>
<div class="vc_single_bar bar_grey">
<span class="vc_bar" data-value="85" data-percentage-value="85" style="width: 85%;"></span>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации полосы прогресса

.progress_bar_8 .vc_label{
text-transform: capitalize;
}
.progress_bar_8 .vc_single_bar{
height: 6px;
margin: 15px 0;
}
.progress_bar_8 .vc_single_bar{
background: hsl(0, 0%, 97%) none repeat scroll 0 0;
border-radius: 3px;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
margin-bottom: 11.6667px;
position: relative;
}
.progress_bar_8 .vc_single_bar span.vc_bar{
background-color: #e98a38;
border-radius: 3px;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 1s linear 0s;
width: 0;
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *