Bootstrap Progress Bar — стиль 12

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

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

<div class="container">
<div class="row">
<div class="col-sm-8 progress_bar">
<h3>HTML5
<span class="percentage">90%</span>
</h3>
<span class="pro-bar" data-value="90" data-percentage-value="90" style="width: 90%;"></span>
</div>
</div>
</div>

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

.progress_bar{
margin-bottom: 15px;
}
.progress_bar > h3{
color: hsl(0, 0%, 100%);
font-size: 14px;
font-weight: 600;
line-height: 25px;
padding: 6px 16px;
margin: 0;
position: relative;
z-index: 1;
}
.progress_bar > h3 > span.percentage{
color: hsl(0, 0%, 18%);
font-size: 14px;
position: absolute;
right: 0px;
text-shadow: none;
}
.progress_bar span.pro-bar{
width: 0;
height: 100%;
background: hsl(168, 76%, 42%);
display: block;
position: absolute;
top: 0;
}
.progress_bar span.orange{
background: #e67e22;
}
.progress_bar span.pink{
background: #ed687c;
}

Теги: