Подробное описание и демонстрация работы полосы прогресса под номером №8 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 8
<div class="container"> <div class="row"> <div class="col-sm-offset-2 col-sm-8"> <div class="progress_bar_8"> <small class="vc_label"> System design <span class="vc_label_units">85%</span> </small> <div class="vc_single_bar bar_grey"> <span class="vc_bar" data-value="85" data-percentage-value="85" style="width: 85%;"></span> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress_bar_8 .vc_label{ text-transform: capitalize; } .progress_bar_8 .vc_single_bar{ height: 6px; margin: 15px 0; } .progress_bar_8 .vc_single_bar{ background: hsl(0, 0%, 97%) none repeat scroll 0 0; border-radius: 3px; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset; margin-bottom: 11.6667px; position: relative; } .progress_bar_8 .vc_single_bar span.vc_bar{ background-color: #e98a38; border-radius: 3px; display: block; height: 100%; left: 0; position: absolute; top: 0; transition: width 1s linear 0s; width: 0; }