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

Использование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v1-6-0.pipui.ru/components/progress-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.