Подробное описание и демонстрация работы полосы прогресса под номером №53 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 53
HTML5
CSS3
J-Query
Bootstrap
<div class="container"> <div class="row"> <div class="col-md-6"> <h3 class="progress-title">HTML5</h3> <div class="progress green"> <div class="progress-bar" style="width:70%;"> <div class="progress-value">70%</div> </div> </div> <h3 class="progress-title">CSS3</h3> <div class="progress blue"> <div class="progress-bar" style="width:45%;"> <div class="progress-value">45%</div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-title{
font-size: 18px;
font-weight: 700;
color: #000;
margin: 0 0 20px;
}
.progress{
height: 5px;
border-radius: 0;
box-shadow: none;
overflow: visible;
margin-bottom: 30px;
}
.progress .progress-bar{
background: #dedede;
box-shadow: none;
position: relative;
-webkit-animation: animate-positive 2s;
animation: animate-positive 2s;
}
.progress .progress-value{
display: block;
font-size: 18px;
font-weight: bold;
color: #235789;
position: absolute;
top: -30px;
right: 0;
-webkit-animation: animate-value 3s;
animation: animate-value 3s;
}
.progress.green{ background: #008000; }
.progress.blue{ background: #235789; }
.progress.orange{ background: #e3b23c; }
.progress.pink{ background: #e65f5c; }
.progress.green .progress-value{ color: #008000; }
.progress.blue .progress-value{ color: #235789; }
.progress.orange .progress-value{ color: #e3b23c; }
.progress.pink .progress-value{ color: #e65f5c; }
@-webkit-keyframes animate-positive{
0% { width: 0; }
}
@keyframes animate-positive{
0% { width: 0; }
}
@-webkit-keyframes animate-value{
0% { opacity: 0; }
25% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes animate-value{
0% { opacity: 0; }
25% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}