Подробное описание и демонстрация работы полосы прогресса под номером №7 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 7
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress-7"> <div class="myprogress"> <div class="pro-bar"></div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-7 .myprogress { position: relative; height: 20px; background-color: #ecf0f1; border: 1px solid #ccc; } .progress-7 .myprogress .pro-bar { width: 70%; height: 100%; background-color: #49a3df; } .progress-7 .myprogress:before { position: absolute; content: "70%"; font-size: 14px; text-align: center; padding: 10px; background: #000; top: -51px; left: 59%; border-radius: 5px; color: #fff; } .progress-7 .myprogress:after { position: absolute; content: ""; height: 10px; background: rgba(255, 0, 0, 0); top: -14px; left: 62%; border-left: 6px solid rgba(255, 0, 0, 0); border-right: 6px solid rgba(255, 0, 0, 0); border-top: 6px solid #000; } @media only screen and (max-width: 480px) { .progress-7 .myprogress:after{ left: 63%; } }