Сделаем прогресс бар progress-bar, который отсчитывает от одного до ста процентов и заполняет индикатор.
Затем рассмотрим прогресс бары в bootstrap, какие бывают и добавим checkbox, с заполнением по процентам.
Зайдем в html и добавим первый див для отображения цифры процентов с идентификатором id=percentCount, его будет добавлять в скрипт.
Второй будет класс percent-count для стилизации css.
Тело бара будет из двух областей.
Первая с классом progress-bar, а вторая с классом progress и идентификатором для скрипта id=progress.
Добавим кнопу button с событием onclick с функцией из скрипта progress ().
Получился код.
|
1 2 3 4 5 |
<div id="percentCount" class="percent-count">100%</div> <div class="progress-bar1"> <div id="progress" class="progress1"></div> </div> <button class="button" type="button" onclick="progress()">Скачать</button> |
Содержание статьи
Стилизуем в main.sass.
- percent-count цифры в процентах будут фиолетового цвета, жирным шрифтом font-weight: bold.
- progress-bar это нижний слой индикации сделаем его побольше, шириной width: 510px, высота height: 30px, отступы будут padding: 5px 5px, фиолетового цвета и закруглим края на border-radius: 15px.
- progress будет индикатором прогресса, который будет увеличиваться до 100%. Изначально индикатор в положение width: 20px. Закруглим border-radius: 10px и сделаем синего цвета.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.percent-count margin: 20px 150px font-size: 30px color: #b641b0 font-weight: bold .progress-bar1 margin-left: 30px width: 510px padding: 5px 5px height: 30px background-color: #b641b0 border-radius: 15px .progress1 width: 20px height: 20px border-radius: 10px background-color: blue |
Напишем скрипт индикации progress-bar в common.js.
Понадобится функция назовем ее progress (), которая будет получать элементы document.getElementById (progress) прогресс бара и процентов.
Добавим две переменные счетчика равное пяти и прогресса равное 25.
Зададим переменную id равную setInterval (frame, 50) и применим функцию frame () с условием, если прогресс бар равен 500 пикселей, а счётчик 100 процентам, то обновляем интервал clearInterval (id).
Иначе else добавляем по пять к прогрессу и по одному к счетчику, получив стили прогресс бара прибавив пять пикселей, также добавляем проценты к счетчику.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { function progress() { var prg = document.getElementById("progress"); var percent = document.getElementById("percentCount"); var counter = 5; var progress = 25; var id = setInterval(frame, 50); function frame() { if (progress == 500 && counter ==100) { clearInterval(id); } else { progress += 5; counter += 1; prg.style.width = progress + "px"; percent.innerHTML = counter + "%"; } } }progress();}); |
Отображение прогресс бара в браузере.
Рассмотрим три вида progress-bar в bootstrap.
1 Простой прогресс бар.
Создаем container c классом row.
Внутри будет див с классом progress, в нем лежит див с классом progress-bar.
Тут же пропишем стиль бара, ширину зададим 35%.
|
1 2 3 4 5 6 7 |
<div class="container"> <div class="row"> <div class="progress"> <div class="progress-bar progress-bar-primary" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"> 35% </div> </div></div></div> |
2 С анимацией полосок.
Добавим у первого бара два новых класса progress-striped active.
Внутри класс progress-bar со стилем style=width: 60%.
|
1 2 3 4 5 |
<div class="progress progress-striped active"> <div class="progress-bar" style="width: 60%;"> <span class="sr-only">Завершено 60%</span> </div> </div> |
3 Разноцветный progress-bar.
Зеленый цвет до 50 процентов, оранжевый до 80 процентов и красный двадцать процентов.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="progress"> <div class="progress-bar progress-bar-success" style="width: 50%"> <span class="sr-only">Завершено 50% (успех)</span> </div> <div class="progress-bar progress-bar-warning" style="width: 30%"> <span class="sr-only">Завершено 30% (предупреждение)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 20%"> <span class="sr-only">Завершено 20% (опасность)</span> </div> </div> |
Скрипт в common.js для bootstrap прогресс баров.
Если заданы значения у баров этот скрипт скидывает все значения до одного процента.
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { var i = 0; function makeProgress(){ if(i < 100){ i = i + 1; $(".progress-bar").css("width", i + "%").text(i + " %"); } setTimeout("makeProgress()", 300); } makeProgress(); }); |
Значение прогресс бара от выбора пункта checkbox.
Зададим четыре ячейки 25, 50, 75 и 100 процентов.
Когда установим галочку в checkbox, то прогресс бар вырастит до этого значения в процентах.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> </div> </div> <div class="row"> <div class="col-md-2"> <label>25%</label> <input name="progress" class="progress" type="checkbox" value="25"> </div> <div class="col-md-2"> <label>50%</label> <input name="progress" class="progress" type="checkbox" value="50"> </div> <div class="col-md-2"> <label>75%</label> <input name="progress" class="progress" type="checkbox" value="75"> </div> <div class="col-md-2"> <label>100%</label> <input name="progress" class="progress" type="checkbox" value="100"> </div> |
Скрипт для checkbox у прогресс бара.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $('input').on('click', function(){ var valeur = 0; $('input:checked').each(function(){ if ( $(this).attr('value') > valeur ) { valeur = $(this).attr('value'); } }); $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur); }); }); |
Отображение в браузуру для всех состояний checkbox.
