Подробное описание и демонстрация работы полосы прогресса под номером №38 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 38
HTML5
85%
CSS3
75%
J-Query
70%
Bootstrap
60%
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress"> <div class="progress-bar" style="width:85%; background:#ed687c;"></div> <div class="progress-content"> <span class="progress-title">HTML5</span> <span class="progress-value">85%</span> </div> </div> <div class="progress"> <div class="progress-bar" style="width:75%; background:#f0ad4e;"></div> <div class="progress-content"> <span class="progress-title">CSS3</span> <span class="progress-value">75%</span> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress{ height: 30px; background: #d7d7d7; border-radius: 0; padding-bottom: 5px; margin-bottom: 20px; position: relative; } .progress .progress-bar{ animation: animate-positive 2s; } .progress .progress-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 2px 0 0 35px; } .progress .progress-title, .progress .progress-value{ font-size: 14px; font-style: italic; color: #fff; display: inline-block; margin-right: 10px; } .progress .progress-title{ letter-spacing: 1px; } .progress .progress-value{ font-weight: 600; } @-webkit-keyframes animate-positive{ 0% { width: 0%; } } @keyframes animate-positive{ 0% { width: 0%; } }