Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Прогресс бар обычный и progress-bar в bootstrap


Прогресс бар обычный и progress-bar в bootstrap

Сделаем прогресс бар progress-bar, который отсчитывает от одного до ста процентов и заполняет индикатор.

Затем рассмотрим прогресс бары в bootstrap, какие бывают и добавим checkbox, с заполнением по процентам.

Зайдем в html и добавим первый див для отображения цифры процентов с идентификатором id=percentCount, его будет добавлять в скрипт.

Второй будет класс percent-count для стилизации css.

Тело бара будет из двух областей.

Первая с классом progress-bar, а вторая с классом progress и идентификатором для скрипта id=progress.

Добавим кнопу button с событием onclick с функцией из скрипта progress ().

Получился код.

Стилизуем в main.sass.

  1. percent-count цифры в процентах будут фиолетового цвета, жирным шрифтом font-weight: bold.
  2. progress-bar это нижний слой индикации сделаем его побольше, шириной width: 510px, высота height: 30px, отступы будут padding: 5px 5px, фиолетового цвета и закруглим края на border-radius: 15px.
  3. progress будет индикатором прогресса, который будет увеличиваться до 100%. Изначально индикатор в положение width: 20px. Закруглим border-radius: 10px и сделаем синего цвета.

Напишем скрипт индикации progress-bar в common.js.

Понадобится функция назовем ее progress (), которая будет получать элементы document.getElementById (progress) прогресс бара и процентов.

Добавим две переменные счетчика равное пяти и прогресса равное 25.

Зададим переменную id равную setInterval (frame, 50) и применим функцию frame () с условием, если прогресс бар равен 500 пикселей, а счётчик 100 процентам, то обновляем интервал clearInterval (id).

Иначе else добавляем по пять к прогрессу и по одному к счетчику, получив стили прогресс бара прибавив пять пикселей, также добавляем проценты к счетчику.

Отображение прогресс бара в браузере.

скрипт индикации progress-bar в common.js

Рассмотрим три вида progress-bar в bootstrap.

1 Простой прогресс бар.

Создаем container c классом row.

Внутри будет див с классом progress, в нем лежит див с классом progress-bar.

Тут же пропишем стиль бара, ширину зададим 35%.

Простой прогресс бар.

2 С анимацией полосок.

Добавим у первого бара два новых класса progress-striped active.

Внутри класс progress-bar со стилем style=width: 60%.

С анимацией полосок прогресс бар

3 Разноцветный progress-bar.

Зеленый цвет до 50 процентов, оранжевый до 80 процентов и красный двадцать процентов.

Разноцветный progress-bar

Скрипт в common.js для bootstrap прогресс баров.

Если заданы значения у баров этот скрипт скидывает все значения до одного процента.

Значение прогресс бара от выбора пункта checkbox.

Зададим четыре ячейки 25, 50, 75 и 100 процентов.

Когда установим галочку в checkbox, то прогресс бар вырастит до этого значения в процентах.

Код в index.html.

Скрипт для checkbox у прогресс бара.

Отображение в браузуру для всех состояний checkbox.

Значение прогресс бара от выбора пункта checkbox

Комментариев нет