Подробное описание и демонстрация работы полосы прогресса под номером №42 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 42
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 85%;"> <div class="progress-value">85%</div> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 75%;"> <div class="progress-value">75%</div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress{ height: 25px; background: #eee; border-radius: 20px; overflow: visible; line-height: 15px; margin: 20px 0 40px 0; } .progress .progress-bar{ border-radius: 20px; position: relative; animation: animate-positive 2s; } .progress .progress-value{ position: absolute; top: -19px; right: 16px; font-size: 13px; color: #fff; padding: 3px 7px; background: #191919; border: 1px solid #000; } .progress .progress-value:after{ content: ""; border-top: 10px solid #191919; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; bottom: -6px; left: 25%; } @-webkit-keyframes animate-positive{ 0% { width: 0%; } } @keyframes animate-positive{ 0% { width: 0%; } }