
Подробное описание и демонстрация работы полосы прогресса под номером №5 для библиотеки Bootstrap. Html и CSS код для реализации progress bar’a на сайте как на изображении.
Демо Шкалы прогресса — стиль 5
<div class="container"> <div class="row"> <div class="col-sm-6"> <input type="radio" class="radio" name="progress" value="five" id="five1"> <label for="five" class="label">5%</label> <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive1"> <label for="twentyfive" class="label">25%</label> <input type="radio" class="radio" name="progress" value="fifty" id="fifty1"> <label for="fifty" class="label">50%</label> <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive1"> <label for="seventyfive" class="label">75%</label> <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred1"> <label for="onehundred" class="label">100%</label> <div class="progress-5"> <div class="progress-bar-5"></div> </div> </div> </div> </div>css разметка для реализации полосы прогресса
.progress-5{ padding: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; } .progress-bar-5{ height: 16px; border-radius: 4px; transition: 0.4s linear; transition-property: width, background-color; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); } #five:checked ~ .progress-5 > .progress-bar-5{ width: 5%; background-color: #f63a0f; } #twentyfive:checked ~ .progress-5 > .progress-bar-5{ width: 25%; background-color: #f27011; } #fifty:checked ~ .progress-5 > .progress-bar-5 { width: 50%; background-color: #f2b01e; } #seventyfive:checked ~ .progress-5 > .progress-bar-5 { width: 75%; background-color: #f2d31b; } #onehundred:checked ~ .progress-5 > .progress-bar-5 { width: 100%; background-color: #86e01e; } .radio { display: none; } .label { display: inline-block; margin: 0 5px 20px; padding: 3px 8px; color: #000000; text-shadow: 0 1px black; border-radius: 3px; cursor: pointer; } .radio:checked + .label { color: #000000; background:#B8C9D9; }