Подробное описание и демонстрация работы полосы прогресса под номером №19 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 19
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress_bar"> <div class="pro-bar"></div> <div class="pro-bg" style="background:#ed687c; width:45%;"> <div class="pro-value">45%</div> </div> <div class="progress_bar_title">HTML5</div> </div> <div class="progress_bar"> <div class="pro-bar"></div> <div class="pro-bg" style="background:#049dff; width:75%;"> <div class="pro-value">75%</div> </div> <div class="progress_bar_title">CSS3</div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress_bar{ margin-bottom: 15px; width: 100%; position: relative; } .pro-bar{ background:#f0f0f0; display: block; width: 100%; height: 40px; line-height: 40px; } .pro-bg { display: block; height: 40px; position: absolute; top: 0; left: 0; overflow: hidden; } .pro-value{ background: hsla(0, 0%, 0%, 0.24); color: hsl(0, 0%, 98%); width: 60px; height: 40px; line-height: 40px; padding: 0 15px; position: absolute; top: 0; right: 0; text-align: center; } .progress_bar_title{ width: 100%; height: 40px; line-height: 40px; color: hsl(0, 0%, 98%); position: absolute; top: 0; left: 0; padding: 0 15px; }