Bootstrap Progress Bar — стиль 16

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

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

<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="progress_bar">
<h3 class="progressbar-title">HTML5</h3>
<div class="progress-bar-inner">
<div class="progress-bar" data-transitiongoal="96" role="progressbar" style="width: 96%; background: #e67e22;" aria-valuenow="96">
<span>96%</span>
</div>
</div>
</div>

<div class="progress_bar">
<h3 class="progressbar-title">CSS3</h3>
<div class="progress-bar-inner">
<div class="progress-bar" data-transitiongoal="80" role="progressbar" style="width: 80%; background: #1abc9c;" aria-valuenow="80">
<span>80%</span>
</div>
</div>
</div>
</div>
</div>
</div>

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

.progress_bar .progressbar-title{
padding: 0 0 3px;
margin: 0;
color:#7e828a;
}
.progress_bar .progress-bar-inner{
overflow:visible;
position: relative;
background-color: hsl(240, 3%, 93%);
border: 1px solid hsl(240, 3%, 93%);
border-radius: 5px;
box-shadow: none;
height: 3px;
margin-bottom: 25px;
padding: 2px 0 5px 3px;
}
.progress_bar .progress-bar{
line-height: 20px;
position: absolute;
top:0;
z-index: 10;
}
.progress_bar .progress-bar > span{
color: hsl(225, 3%, 49%);
display: block;
font-size: 13px;
font-weight: 400;
line-height: 18px;
overflow: visible;
position: absolute;
right: 0;
text-align: center;
top: -27px;
z-index: 9999;
}

Теги: