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

## Общая информация <a href="#general-information" id="general-information"></a>

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

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

```html
<div class="progress" data-progress-type="linear">
    <div class="progress-bar" style="width: 35%;"></div>
    <div class="progress-text">35%</div>
    <div class="progress-label">Label text</div>
</div>
```

{% endcode %}

{% embed url="<https://codepen.io/pipui/pen/GRBxdbY>" %}
Пример работы кода выше
{% endembed %}

{% hint style="warning" %}
Атрибут <mark style="color:orange;">`data-progress-type`</mark> является обязательным, т.к. для каждого типа прогресса своя стратегия обработки стилей и скриптов.
{% endhint %}

На данный момент поддерживаются 2 типа полос прогресса: **linear** и **radial**

Т.к. radial тип работает совершенно иначе, нежели linear. Его инициализация требуется через  canvas и javascript.

```html
<div id="progressbar" class="progress" data-progress-type="radial">
    <canvas class="progress-bar" data-progress-size="20"></canvas>
    <div class="progress-text">Text</div>
    <div class="progress-label">Label</div>
</div>

<script>
    let progress = new PipUI.Progress('#progressbar', {styles: {width: '200px', height: '20'}});
</script>
```

## Javascript

Управление полосой прогресса можно производить через Javascript, обращаясь к экземпляру класса PipUI.Progress

```html
<div id="progress"></div>

<script>let progress = new PipUI.Progress('#progress', {}, true);</script>
```

Класс PipUI.Progress поддерживает 3 параметра

1. HTMLElement или строковая ссылка на элемент
2. Объект опций
3. Стратегия создания (true/false)

В примере выше мы передали 3й параметр, который означает, что прогресс бар будет создан из опций, которые мы должны указать во втором параметре.

### Опции <a href="#options" id="options"></a>

<pre><code>// Выводить в консоль отладку
debug: false

// Текст прогресс бара
text: ''

// Дополнительный текст для прогресс бара
label: ''

// Размер прогресс бара в процентах
progress: 0

// Тип прогресс бара
type: 'linear'

// Объект настроек стилей
styles: {
    width: '100%'
    height: '28px'
    padding: 4
<strong>    barColor: '#fff'
</strong>    progressColor: '#212121'
}

// Объект настроек шаблона
templates: {
    text: '&#x3C;div class="progress-text">&#x3C;/div>'
    label: '&#x3C;div class="progress-label">&#x3C;/div>'
}

// Объект типов
types: {...}
</code></pre>

### Методы <a href="#methods" id="methods"></a>

```
let progress = new PipUI.Progress('#progress');

progress.getID() // Вернет уникальный идентификатор

progress.setOptions(object) // Изменить опции. DOM не будет изменен
// до вызова метода progress.update()

progress.getOptions() // Получить опции

progress.setProgress(float) // Изменить размер прогресс бара в процентах. DOM будет обновлен

progress.setText(string) // Изменить текст прогресс бара. DOM будет обновлен

progress.setLabel(string) // Изменить дополнительный текст. DOM будет обновлен
 
progress.update() // Обновить DOM
```

### События

<table><thead><tr><th width="268.3333333333333">Триггер</th><th>Описание</th><th>Инициатор</th></tr></thead><tbody><tr><td>change-progress-pipui</td><td>Срабатывает при изменении размера полосы прогресс бара</td><td>.progress</td></tr><tr><td>change-text-progress-pipui</td><td>Срабатывает при изменении текста внутри прогресс бара</td><td>.progress</td></tr><tr><td>change-label-progress-pipui</td><td>Срабатывает при изменении дополнительного текста прогресс бара</td><td>.progress</td></tr><tr><td>update-progress-pipui</td><td>Срабатывает при полном обновлении прогресс бара</td><td>.progress</td></tr></tbody></table>

### Типы прогресс баров <a href="#progress-bar-types" id="progress-bar-types"></a>

Для изменения типов прогресс баров, необходимо передать в объект types опций свои параметры.

{% hint style="warning" %}
Важно чтобы тип имел в себе 3 обязательных ключа: **template, create, progress**

1. template - HTML строка шаблона для .progress-bar
2. create - функция создания прогресс бара
3. progress - изменение размера прогресс бара
   {% endhint %}


---

# 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://v2-0-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.