Подробное описание и демонстрация работы полосы прогресса под номером №69 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 69
HTML5
90%
CSS3
50%
J-Query
80%
Bootstrap
65%
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress pink"> <h3 class="progress-title">HTML5</h3> <div class="progress-value">90%</div> <div class="progress-bar" style="width:90%; background:linear-gradient(to right,#f791bd,#ff4a98);"></div> </div> <div class="progress green"> <h3 class="progress-title">CSS3</h3> <div class="progress-value">50%</div> <div class="progress-bar" style="width: 50%; background:linear-gradient(to right,#baf883,#7CF210);"></div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress{ height: 20px; background: #fff; border-radius: 15px 0 0 15px; box-shadow: none; margin: 20px 50px 40px 100px; overflow: visible; position: relative; } .progress .progress-title{ display: block; font-size: 18px; font-weight: 700; color: #205580; position: absolute; bottom: -3px; left: -90px; } .progress .progress-bar{ background: #fff; box-shadow: none; border-radius: 15px 0 0 15px; position: relative; -webkit-animation: animate-positive 2s; animation: animate-positive 2s; } .progress .progress-bar:before{ content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; position: absolute; top: -10px; right: -20px; } .progress .progress-value{ display: block; font-size: 18px; font-weight: 700; color: #205580; position: absolute; bottom: -5px; right: -50px; } .progress.pink .progress-bar:before{ border-left: 20px solid #ff4a98; } .progress.blue .progress-bar:before{ border-left: 20px solid #2c5af9; } .progress.green .progress-bar:before{ border-left: 20px solid #7cf210; } .progress.orange .progress-bar:before{ border-left: 20px solid #ff5f25; } @-webkit-keyframes animate-positive{ 0% { width: 0; } } @keyframes animate-positive{ 0% { width: 0; } }