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

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

{% code title="Пример прогресс бара" lineNumbers="true" %}

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

{% endcode %}

{% embed url="<https://codepen.io/pipui/pen/OJwbdpJ>" %}
Примеры разных стилей прогресс бара
{% endembed %}

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

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

<mark style="color:orange;">`data-border-size`</mark> - ширина линии\ <mark style="color:orange;">`data-background-color`</mark> - цвет фона линии\ <mark style="color:orange;">`data-border-color`</mark> - цвет внутреннего прогресс-бара\ <mark style="color:orange;">`data-border-padding`</mark> - отступ по краям внутреннего прогресс-бара\ <mark style="color:orange;">`data-radius`</mark> - размер прогресс-бара в процентах. Поддерживаются числа с плавающей точкой\ <mark style="color:orange;">`data-timer`</mark> - интервал обновления блока в миллисекундах. По умолчанию без обновления

```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>
```

{% embed url="<https://codepen.io/pipui/pen/abjBxBZ>" %}
Примеры радиального прогресс бара
{% endembed %}