Исользование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. PipUI дает возможность без особых усилий добавить такие полосы в свое приложение.
HTML
<div class="progress">
<div class="bar" style="width: 35%;"></div>
<div class="text">35%</div>
</div>
<div class="progress mt-20"><div class="bar bg-orange-i" style="width: 35%;"></div></div>
<div class="progress mt-20"><div class="bar bg-red-i" style="width: 75%;"></div></div>
<div class="progress mt-20"><div class="bar bg-blue-i" style="width: 100%;"></div></div>
<div class="progress mt-20"><div class="bar bg-green-i" style="width: 20%;"></div></div>
Помимо прогресс-бара в виде полос, вы можете вывести и радиальный вариант.
Не смотря на то, что в коде используется тег <canvas>, он поддерживает тонкую кастомизацию благодаря атрибутам.
data-border-size - ширина линии
data-background-color - цвет фона линии
data-border-color - цвет внутреннего прогресс-бара
data-border-padding - отступ по краям внутреннего прогресс-бара
data-radius - размер прогресс-бара в процентах. Поддерживаются числа с плавающей точкой
data-timer - интервал обновления блока в миллисекундах. По умолчанию без обновления
HTML
<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>
<div class="progress-radial">
<canvas class="bar" width="120" height="120" data-background-color="#424242" data-border-color="#2196F3" data-radius="64.35"></canvas>
<div class="text">64.35%</div>
<div class="subtext">Progress</div>
</div>
<div class="progress-radial">
<canvas class="bar" width="200" height="200" data-radius="50"></canvas>
<div class="text">50%</div>
<div class="subtext">Progress</div>
</div>
<div class="progress-radial">
<canvas class="bar" width="200" data-timer="30" data-border-color="#8BC34A" data-border-size="32" data-border-padding="6" height="200" data-radius="75"></canvas>
<div class="text">75%</div>
<div class="subtext">Progress</div>
</div>