
Подробное описание и демонстрация работы полосы прогресса под номером №30 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 30
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress-bar-outer" style="background: #dceeef;"> <div class="progress-inner"> <div class="progress" style="background: #00b7f9;"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> <div class="progress-value">80%</div> </div> </div> <div class="progress-bar-outer" style="background: #e0e8d8;"> <div class="progress-inner"> <div class="progress" style="background: #92c26a;"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div> </div> <div class="progress-value">65%</div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-bar-outer{ margin-bottom: 20px; border-radius: 30px; padding: 20px; border: 1px solid rgba(50, 50, 50, 0.10); } .progress-bar-outer:last-child{ margin-bottom: 0; } .progress-bar-outer .progress-inner{ background: #e2eef4; border-radius: 20px; padding: 25px; box-shadow: inset 0 0 3px 3px rgba(50, 50, 50, 0.20); position: relative; } .progress-bar-outer .progress{ height: 27px; margin: 0; padding: 4px 0; border-radius: 10px; position: relative; } .progress-bar-outer .progress-bar{ box-shadow: none; background: transparent; animation: progress 4s; } .progress-bar-outer .progress:before{ content: "f111"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 4px; color: #fff; } .progress-bar-outer .progress-value{ position: absolute; top: 27px; left: 48%; font-size: 18px; font-weight: bold; letter-spacing: 2px; color: #fff; } @-webkit-keyframes progress{ 0% { width: 0%;} } @keyframes progress{ 0% { width:0%; } }