Подробное описание и демонстрация работы полосы прогресса под номером №26 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 26
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progressbar-title red"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> <span class="progressbar-value ">80%</span> </div> <div class="progressbar-title"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> <span class="progressbar-value ">60%</span> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progressbar-title{
position: relative;
margin-bottom:10px;
background:#26c9ff;
border-radius:5px;
padding: 30px 10px 30px 80px;
}
.progress{
height:10px;
border-radius:10px;
box-shadow: none;
line-height: 35px;
margin:0;
background:#0ba2da;
}
.progress .progress-bar{
background: #fff;
animation: progress 6s;
}
.progressbar-title .progressbar-value{
position:absolute;
left:15px;
top:14px;
color:#fff;
font-weight: bold;
background:#0ba2da;
padding:10px 15px;
border-radius:5px;
}
.progressbar-title.red{
background:#ff5a4e;
}
.progressbar-title.red .progressbar-value,
.progressbar-title.red .progress{
background:#ff3330;
}
.progressbar-title.orange{
background:#f17d4e;
}
.progressbar-title.orange .progressbar-value,
.progressbar-title.orange .progress{
background:#dc551d;
}
@-webkit-keyframes progress{
0% { width: 0%;}
}
@keyframes progress{
0% { width:0%; }
}