Подробное описание и демонстрация работы полосы прогресса под номером №9 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 9
<div class="container"> <div class="row"> <div class="col-sm-offset-2 col-sm-8"> <div class="progress_bar"> <h4>HTML5</h4> <div class="progress"> <div class="progress_value value-90"></div> </div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress_bar {
margin-bottom:26px;
}
.progress_bar h4{
font-size:21px;
color: #000000;
}
.progress_bar .progress{
width: 100%;
background: rgba(8,102,220,.2);
overflow: hidden;
border-radius:5px;
}
.progress_value{
height: 1.66em;
float: left;
background: #9b59b6;
}
.progress_bar .green{
background: #1abc9c;
}
.progress_bar .dark-green{
background: #008b8b;
}
.progress_bar .orange{
background: #e67e22;
}
.progress_bar .pink{
background: #ed687c;
}
.value-00 { width: 0; }
.value-10 { width: 10%; }
.value-20 { width: 20%; }
.value-30 { width: 30%; }
.value-40 { width: 40%; }
.value-50 { width: 50%; }
.value-60 { width: 60%; }
.value-70 { width: 70%; }
.value-80 { width: 80%; }
.value-90 { width: 90%; }
.value-100 { width: 100%; }
/*----------keyframes---------*/
@-webkit-keyframes slideIn {
0% { width: 0; }
25% { width:100%; }
100% { width: 75%; }
}
@-moz-keyframes slideIn {
0% { width: 0; }
25% { width:100%; }
100% { width: 65%; }
}
@-ms-keyframes slideIn {
0% { width: 0; }
25% { width:100%; }
100% { width: 55%; }
}
@-o-keyframes slideIn {
0% { width: 0; }
25% { width:100%; }
100% { width: 45%; }
}
@keyframes slideIn {
0% { width: 0; }
25% { width:100%; }
100% { width: 35%; }
}
.progress_value {
animation: slideIn 2s;
}