Подробное описание и демонстрация работы полосы прогресса под номером №63 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 63
HTML5 — 60%
CSS3 — 95%
J-Query — 50%
Bootstrap — 80%
<div class="container"> <div class="row"> <div class="col-md-6"> <h3 class="progress-title">HTML5 - 60%</h3> <div class="progress orange"> <div class="progress-bar" style="width:60%; background:#f26419;"></div> </div> <h3 class="progress-title">CSS3 - 95%</h3> <div class="progress yellow"> <div class="progress-bar" style="width:95%; background:#edb458;"></div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-title{
font-size: 17px;
font-weight: 700;
color: #000;
margin: 0 0 20px;
}
.progress{
height: 7px;
background: #fff;
border-radius: 0;
box-shadow: none;
border: 1px solid #000;
margin-bottom: 40px;
overflow: visible;
}
.progress .progress-bar{
box-shadow: none;
border-radius: 0;
position: relative;
animation: animate-positive 2s;
}
.progress .progress-bar:before,
.progress .progress-bar:after{
content: "";
width: 20px;
height: 20px;
background: #fff;
outline: 1px solid #000;
position: absolute;
top: -7px;
left: -1px;
}
.progress .progress-bar:after{
left: auto;
right: 0;
}
.progress.orange .progress-bar:before,
.progress.orange .progress-bar:after{
border: 4px solid #f26419;
}
.progress.yellow .progress-bar:before,
.progress.yellow .progress-bar:after{
border: 4px solid #edb458;
}
.progress.blue .progress-bar:before,
.progress.blue .progress-bar:after{
border: 4px solid #0e79b2;
}
.progress.green .progress-bar:before,
.progress.green .progress-bar:after{
border: 4px solid #7cb518;
}
@-webkit-keyframes animate-positive{
0% { width: 0; }
}
@keyframes animate-positive{
0% { width: 0; }
}