Подробное описание и демонстрация работы полосы прогресса под номером №43 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 43
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress-bar-outer"> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:90%;"></div> </div> </div> <div class="progress-bar-outer"> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:70%;"></div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.demo{
background: #deeaeb;
}
.progress-bar-outer{
background: #fff;
border-radius: 50px;
padding: 30px;
margin: 20px 0;
box-shadow: 0 0 10px rgba(209,219,231,0.7);
}
.progress{
height: 10px;
margin: 0;
overflow: visible;
border-radius: 50px;
background: #eaedf3;
box-shadow: inset 0 1px 10px rgba(0,0,0,0.1);
}
.progress .progress-bar{
border-radius: 50px;
position: relative;
animation: animate-positive 30s;
}
.progress .progress-bar:after{
content: "f188";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 30px;
color: #000077;
position: absolute;
top: -6px;
right: -24px;
transform: rotate(90deg);
}
@-webkit-keyframes animate-positive{
0% { width: 0%;}
20% { width: 3%;}
30% { width: 9%;}
50% { width: 15%;}
70% { width: 25%;}
100% { width: 90%;}
}
@keyframes animate-positive{
0% { width: 0%;}
20% { width: 3%;}
30% { width: 9%;}
50% { width: 15%;}
70% { width: 25%;}
100% { width: 90%;}
}