Bootstrap Progress Bar — стиль 15

Подробное описание и демонстрация работы полосы прогресса под номером №15 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.

Демо Шкалы прогресса — стиль 15

HTML5
75%
CSS3
90%
JavaScript
75%
Php
90%
html разметка для реализации полосы прогресса

<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="progress_bar">
<div class="pro-bar" data-percent="75%">
<div class="progressbar-title" style="background: #fec840;">
<span>HTML5</span>
</div>
<div class="progress-bar-inner" style="background: rgb(254, 200, 64); width: 75%;"></div>
<div class="progress_number">75%</div>
</div>
</div>

<div class="progress_bar">
<div class="pro-bar" data-percent="90%">
<div class="progressbar-title" style="background: #cd7427;">
<span>CSS3</span>
</div>
<div class="progress-bar-inner" style="width: 90%; background: #e67e22;"></div>
<div class="progress_number">90%</div>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации полосы прогресса

.progress_bar .pro-bar{
background: hsl(0, 0%, 93%) ;
border-radius: 3px;
display: block;
width: 100%;
height: 35px;
margin-bottom: 15px;
position: relative;
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: width, background-color;
transition-timing-function: linear;
}
.progress_bar .progressbar-title{
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
color: hsl(0, 0%, 100%);
font-size: 13px;
font-weight: bold;
left: 0;
position: absolute;
top: 0;
}
.progress_bar .progressbar-title > span {
background: hsla(0, 0%, 0%, 0.1);
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
display: block;
height: 35px;
line-height: 35px;
padding: 0 20px;
text-transform: uppercase;
}
.progress_bar .progress-bar-inner{
border-radius: 3px;
width: 0;
height: 35px;
}
.progress_bar .progress_number{
color: hsla(0, 0%, 0%, 0.4);
font-size: 11px;
height: 35px;
line-height: 35px;
position: absolute;
right: 10px;
top: 0;
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *