
Подробное описание и демонстрация работы полосы прогресса под номером №11 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 11
<div class="container"> <div class="row"> <div class="col-sm-8"> <div class="progress_bar"> <div> <span style="width: 95%;"> <em> <b>95</b> % </em> </span> </div> </div> <div class="progress_bar green"> <div> <span style="width:75%;"> <em> <b>75</b> % </em> </span> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress_bar{ margin-bottom: 34px; } .progress_bar > div{ border: 2px solid hsl(0, 0%, 97%); border-radius:3px; padding: 4px; position: relative; width: 100%; } .progress_bar > div:before{ background: #9b59b6; content: ""; width:2px; height: 15px; position: absolute; left: 2px; top: -2px; } .progress_bar > div > span{ display: table; height: 3px; position: relative; background: #9b59b6; } .progress_bar > div > span:before{ background: #9b59b6; content: ""; width: 2px; height: 18px; position: absolute; right: 0; top: -7px; } .progress_bar > div > span:after{ border-color: transparent #9b59b6 transparent transparent; border-style: solid; border-width: 7.5px 7px 7.5px 0; content: ""; width: 0; height: 0; position: absolute; right: 0; top: -5px; } .progress_bar > div > span em{ background: #f7f7f7; border-radius: 3px; color:#757575; font-size: 14px; font-weight: bold; padding:2px 6px; position: absolute; right:0; top: -35px; } .progress_bar.green > div:before, .progress_bar.green > div > span, .progress_bar.green > div > span:before{ background: #1abc9c; } .progress_bar.green > div > span:after{ border-color: transparent #1abc9c transparent transparent; } .progress_bar.orange > div:before, .progress_bar.orange > div span, .progress_bar.orange > div > span:before{ background: #e67e22; } .progress_bar.orange > div > span:after{ border-color: transparent #e67e22 transparent transparent; } .progress_bar.pink > div:before, .progress_bar.pink > div > span, .progress_bar.pink > div > span:before{ background: #ed687c; } .progress_bar.pink > div > span:after{ border-color: transparent #ed687c transparent transparent; }