Bootstrap Progress Bar — стиль 11

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

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

95 %
75 %
55 %
90 %
html разметка для реализации полосы прогресса

<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="progress_bar">
<div>
<span style="width: 95%;">
<em>
<b>95</b>
%
</em>
</span>
</div>
</div>
<div class="progress_bar green">
<div>
<span style="width:75%;">
<em>
<b>75</b>
%
</em>
</span>
</div>
</div>
</div>
</div>
</div>

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

.progress_bar{
margin-bottom: 34px;
}
.progress_bar > div{
border: 2px solid hsl(0, 0%, 97%);
border-radius:3px;
padding: 4px;
position: relative;
width: 100%;
}
.progress_bar > div:before{
background: #9b59b6;
content: "";
width:2px;
height: 15px;
position: absolute;
left: 2px;
top: -2px;
}
.progress_bar > div > span{
display: table;
height: 3px;
position: relative;
background: #9b59b6;
}
.progress_bar > div > span:before{
background: #9b59b6;
content: "";
width: 2px;
height: 18px;
position: absolute;
right: 0;
top: -7px;
}
.progress_bar > div > span:after{
border-color: transparent #9b59b6 transparent transparent;
border-style: solid;
border-width: 7.5px 7px 7.5px 0;
content: "";
width: 0;
height: 0;
position: absolute;
right: 0;
top: -5px;
}
.progress_bar > div > span em{
background: #f7f7f7;
border-radius: 3px;
color:#757575;
font-size: 14px;
font-weight: bold;
padding:2px 6px;
position: absolute;
right:0;
top: -35px;
}
.progress_bar.green > div:before,
.progress_bar.green > div > span,
.progress_bar.green > div > span:before{
background: #1abc9c;
}
.progress_bar.green > div > span:after{
border-color: transparent #1abc9c transparent transparent;
}
.progress_bar.orange > div:before,
.progress_bar.orange > div span,
.progress_bar.orange > div > span:before{
background: #e67e22;
}
.progress_bar.orange > div > span:after{
border-color: transparent #e67e22 transparent transparent;
}
.progress_bar.pink > div:before,
.progress_bar.pink > div > span,
.progress_bar.pink > div > span:before{
background: #ed687c;
}
.progress_bar.pink > div > span:after{
border-color: transparent #ed687c transparent transparent;
}



Теги:
0

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

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