Bootstrap Progress Bar — стиль 14

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

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

<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="progress_bar">
<div class="progress_bar_title">HTML5</div>
<div class="progress_number">80%</div>
<div class="pro-bar">
<div class="progress-bar-inner" style="width:80%; background:#4CC1D3;" data-score="80"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="progress_bar orange">
<div class="progress_bar_title">CSS3</div>
<div class="progress_number">60%</div>
<div class="pro-bar">
<div class="progress-bar-inner" style="width:60%; background:#e67e22;" data-score="60"></div>
</div>
</div>
</div>
</div>
</div>

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

.progress_bar{
position: relative;
}
.progress_bar .progress_bar_title{
color: hsl(210, 2%, 50%);
font-size: 16px;
line-height: 22px;
font-weight:normal;
text-transform: uppercase;
}
.progress_bar .progress_number{
color: hsl(188, 61%, 56%);
font-size: 24px;
line-height: 22px;
font-weight:normal;
position: absolute;
top: 0;
right: 0;
}
.progress_bar .pro-bar {
background: hsl(210, 8%, 85%);
margin:5px 0 20px 0;
}
.progress_bar .progress-bar-inner {
height:2px;
}
.progress_bar.orange .progress_number{
color:#e67e22;
}
.progress_bar.pink .progress_number{
color:#ed687c;
}

Теги: