> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/progress-bar.md).

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

## Общая информация <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 %}