Подробное описание и демонстрация работы полосы прогресса под номером №32 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 32
HTML
CSS3
java script
<div class="container"> <div class="row"> <div class="col-md-6"> <h3 class="progressbar-title">HTML</h3> <div class="progress"> <div class="progress-bar" style="width: 65%; background: #ed687c;"> <span class="progress-icon fa fa-check" style="border-color:#ed687c; color:#ed687c;"></span> <div class="progress-value">65%</div> </div> </div> <h3 class="progressbar-title">CSS3</h3> <div class="progress"> <div class="progress-bar" style="width: 50%; background: #92c26a;"> <span class="progress-icon fa fa-check" style="border-color:#92c26a; color:#92c26a;"></span> <div class="progress-value">50%</div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progressbar-title{ font-size: 14px; color: #848484; text-transform: capitalize; } .progress{ height: 5px; overflow: visible; background: #f0f0f0; margin-bottom: 40px; } .progress .progress-bar{ position: relative; animation: animate-positive 2s; } .progress .progress-icon{ width: 30px; height: 30px; line-height: 25px; border-radius: 50%; font-size: 13px; position: absolute; top: -14px; right: 0; background: #fff; border-width: 3px; border-style: solid; } .progress-value{ font-size: 13px; color: #848484; position: absolute; top: 16px; right: 0; } @-webkit-keyframes animate-positive { 0% { width: 0%; } } @keyframes animate-positive { 0% { width: 0%; } }