Подробное описание и демонстрация работы полосы прогресса под номером №6 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 6
25%
50%
75%
<div class="container"> <div class="row"> <div class="col-sm-6"> <div class="progress-6"> <span class="progress-val">25%</span> <span class="progress-bar-6"><span class="progress-in" style="width: 25%"></span></span> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-6 {
border-radius: 12px;
box-shadow: 0 1px rgba(255, 255, 255, 0.8) inset, 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
overflow: hidden;
padding: 0 15px;
margin-bottom: 40px;
}
.progress-6 .progress-val {
float: right;
margin-left: 15px;
font: bold 15px/34px Helvetica, Arial, sans-serif;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
.progress-bar-6 {
display: block;
overflow: hidden;
height: 8px;
margin: 13px 0;
background: #b8b8b8;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
}
.progress-6 .progress-in {
display: block;
min-width: 8px;
height: 8px;
background: #e95d00;
border-radius: 4px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}