Bootstrap Progress Bar — стиль 10

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

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

<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="progress_bar fadeIn">
<div class="progress_holder">
<div class="progress_bar_title">HTML5</div>
<div class="progress_number">100%</div>
</div>
<div class="progress_bar_holder">
<div class="progress_bar_content" style="width: 100%; background:#9b59b6;" data-score="100"></div>
</div>
</div>
<div class="progress_bar fadeIn">
<div class="progress_holder">
<div class="progress_bar_title">CSS3</div>
<div class="progress_number">70%</div>
</div>
<div class="progress_bar_holder">
<div class="progress_bar_content" style="width: 70%; background:#1ABC9C;" data-score="100"></div>
</div>
</div>
</div>
</div>
</div>

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

.fadeIn {
animation-duration: 0.7s;
animation-fill-mode: forwards;
animation-name: fadeIn;
animation-timing-function: ease-in-out;
}
.progress_bar {
margin-bottom: 10px;
position: relative;
}
.progress_bar_title {
color: hsl(0, 0%, 0%);
display: inline;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
}
.progress_number {
color: #a2a1a4;
font-size: 13px;
font-weight: 900;
position: absolute;
right: 0;
text-transform: uppercase;
top: 0;
}
.progress_bar_holder {
background: #d6d9dc;
margin-top: 5px;
}
.progress_bar_content {
height: 5px;
transition: width 1s ease-in-out 0s;
}

Теги: