Полосы прогресса

Использование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. PipUI дает возможность без особых усилий добавить такие полосы в свое приложение.

Пример прогресс бара

<div class="progress">
    <div class="bar" style="width: 35%;"></div>
    <div class="text">Some text</div>
</div>

Примеры разных стилей прогресс бара

Помимо прогресс-бара в виде полос, вы можете вывести и радиальный вариант.

Не смотря на то, что в коде используется тег , он поддерживает тонкую кастомизацию благодаря атрибутам.

data-border-size - ширина линии data-background-color - цвет фона линии data-border-color - цвет внутреннего прогресс-бара data-border-padding - отступ по краям внутреннего прогресс-бара data-radius - размер прогресс-бара в процентах. Поддерживаются числа с плавающей точкой data-timer - интервал обновления блока в миллисекундах. По умолчанию без обновления

<div class="progress-radial">
    <canvas class="bar" width="120" height="120" data-radius="25"></canvas>
    <div class="text">25%</div>
    <div class="subtext">Progress</div>
</div>

Примеры радиального прогресс бара