Подробное описание и демонстрация работы полосы прогресса под номером №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%; }
}