Подробное описание и демонстрация работы полосы прогресса под номером №76 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 76
HTML5 — 60%
CSS3 — 90%
J-Query — 50%
PHP — 80%
<div class="container"> <div class="row"> <div class="col-md-6"> <h3 class="progress-title">HTML5 - 60%</h3> <div class="progress red"> <div class="progress-bar" style="width:60%; background:#f80a0a;"></div> </div> <h3 class="progress-title">CSS3 - 90%</h3> <div class="progress yellow"> <div class="progress-bar" style="width:90%; background:#f9d700;"></div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-title{ font-size: 18px; font-weight: 700; color: #000; margin: 0 0 30px; } .progress{ height: 7px; background: #f8f8f8; border-radius: 0; box-shadow: none; margin-bottom: 30px; overflow: visible; position: relative; } .progress .progress-bar{ border: 1px solid #000; border-radius: 0; box-shadow: none; position: relative; animation: animate-positive 2s; } .progress .progress-bar:after{ content: ""; width: 20px; height: 20px; background: #23e454; border: 6px double #fff; outline: 2px solid #23e454; position: absolute; top: -6px; right: 0; } .progress.red .progress-bar:after{ background: #f80a0a; outline: 2px solid #f80a0a; } .progress.yellow .progress-bar:after{ background: #f9d700; outline: 2px solid #f9d700; } .progress.blue .progress-bar:after{ background: #0698ff; outline: 2px solid #0698ff; } @-webkit-keyframes animate-positive{ 0% { width: 0; } } @keyframes animate-positive{ 0% { width: 0; } }