Подробное описание и демонстрация работы полосы прогресса под номером №13 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 13
<div class="container"> <div class="row"> <div class="col-sm-offset-2 col-sm-8"> <div class="progress_bar_13"> <div class="progress-bar-description"> HTML5 <span style="left:75%;">75%</span> </div> <div class="pro-bar"> <span class="progress-bar-outer already-animated" style="background-color: #19bc9b; width: 75%;" data-width="75"> <span class="progress-bar-inner"></span> </span> </div> </div> </div> <div class="col-sm-offset-2 col-sm-7"> <div class="progress_bar_13"> <div class="progress-bar-description"> CSS3 <span style="left:65%;">65%</span> </div> <div class="pro-bar"> <span class="progress-bar-outer already-animated" style="background-color: #e67e22; width: 65%;" data-width="65"> <span class="progress-bar-inner"></span> </span> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress_bar_13 .progress-bar-description{
display: block;
line-height: 14px;
margin-bottom: 5px;
text-transform: uppercase;
}
.progress_bar_13 .progress-bar-description span{
float: right;
}
.progress_bar_13 .pro-bar{
background-color: hsl(196, 16%, 81%);
display: block;
height: 35px;
margin-bottom: 15px;
position: relative;
}
.progress_bar_13 .pro-bar .progress-bar-outer{
background: url("../images/pattern.png") repeat scroll left top;
height: 100%;
left: 0;
position: absolute;
top: 0;
}
.progress_bar_13 .pro-bar .progress-bar-inner{
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}