
Подробное описание и демонстрация работы полосы прогресса под номером №45 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 45
HTML5
CSS3
J-Query
Bootstrap
<div class="container"> <div class="row"> <div class="col-md-6"> <h3 class="progress-title">HTML5</h3> <div class="progress"> <div class="progress-bar" style="width:85%; background:#00a79c; color:#00a79c;"> <div class="progress-value">85%</div> </div> </div> <h3 class="progress-title">CSS3</h3> <div class="progress"> <div class="progress-bar" style="width:75%; background:#3498db; color:#3498db;"> <div class="progress-value">75%</div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-title{ font-size: 16px; font-weight: 700; color: #5a5a5a; margin: 0 0 10px; } .progress{ height: 10px; line-height: 15px; background: #f0f0f0; border-radius: 0; margin-bottom: 50px; padding: 4px; box-shadow: none; overflow: visible; } .progress:last-child{ margin-bottom: 0; } .progress .progress-bar{ position: relative; animation: animate-positive 2s; } .progress .progress-bar:after{ content: "f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 22px; position: absolute; top: -9px; right: -2px; } .progress .progress-value{ font-size: 13px; color: #fff; border-radius: 4px; padding: 3px 7px; background: #29102b; position: absolute; top: -50px; right: -35px; } .progress .progress-value:after{ content: ""; border: 5px solid transparent; border-top: 5px solid #29102b; border-left: 5px solid #29102b; position: absolute; bottom: -6px; left: 0; } @-webkit-keyframes animate-positive{ 0% { width: 0%; } } @keyframes animate-positive{ 0% { width: 0%; } }