
Подробное описание и демонстрация работы полосы прогресса под номером №23 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 23
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress_bar"> <div class="pro-bar"></div> <div class="pro-bg" style="background:#ed687c; width:80%;"> <div class="pro-value">80%</div> <div class="progress_bar_title">HTML5</div> </div> </div> <div class="progress_bar"> <div class="pro-bar"></div> <div class="pro-bg" style="background:#049dff; width:60%;"> <div class="pro-value">60%</div> <div class="progress_bar_title">CSS3</div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress_bar{ margin-bottom: 20px; position: relative; } .progress_bar .pro-bar{ background:#d3d3d3; display: block; width: 100%; height:25px; } .progress_bar .pro-bg { height:25px; line-height: 25px; position: absolute; top: 0; left: 0; overflow: hidden; font-weight: bold; animation: animate-positive 2s; } .progress_bar .pro-value{ color: hsl(0, 0%, 98%); padding: 0 15px; text-align: center; float: left; } .progress_bar .progress_bar_title{ color: hsl(0, 0%, 98%); } @-webkit-keyframes animate-positive { 0% { width: 0%;} } @keyframes animate-positive { 0% { width:0%; } }