Элементы

Индикатор выполнения

Полоса на <progress>: обычная, тонкая, с подписью и процентом, неопределённое состояние.

Примеры

<progress class="progress" max="100" value="72" aria-label="Загрузка записи">72%</progress>
<progress class="progress progress--thin progress--safety" max="100" value="35" aria-label="Обработка">35%</progress>

<div class="progress-field">
  <div class="progress-field__head"><label for="pf-disk">Диск сервера записей</label><span class="progress-field__value">86%</span></div>
  <progress class="progress progress--safety" id="pf-disk" max="100" value="86">86%</progress>
  <p class="progress-field__note">Занято 1,7 из 2 ТБ. Старые записи удаляются через 30 дней.</p>
</div>
<div class="progress-field">
  <div class="progress-field__head"><label for="pf-up">Аптайм за 30 дней</label><span class="progress-field__value">99,98%</span></div>
  <progress class="progress progress--ok" id="pf-up" max="100" value="99.98">99,98%</progress>
</div>

<div class="progress-field">
  <div class="progress-field__head"><label for="pf-wait">Подключение к встрече</label><span class="progress-field__value">…</span></div>
  <progress class="progress" id="pf-wait">Идёт подключение</progress>
</div>

Установка

bukatchuk-ui add progress

Файлы

Варианты

Переменные

Вставка для Jekyll

{%- comment -%}
  Индикатор выполнения. Параметры: value (0–100; без значения — неопределённое состояние),
  label (подпись; если задана — вариант с подписью и процентом), variant (safety | ok), thin, id.
{%- endcomment -%}
{%- assign id = include.id | default: 'progress' -%}
{%- assign cls = 'progress' -%}
{%- if include.variant %}{% assign cls = cls | append: ' progress--' | append: include.variant %}{% endif -%}
{%- if include.thin %}{% assign cls = cls | append: ' progress--thin' %}{% endif -%}
{%- if include.label -%}
<div class="progress-field">
  <div class="progress-field__head"><label for="{{ id }}">{{ include.label }}</label>{% if include.value %}<span class="progress-field__value">{{ include.value }}%</span>{% endif %}</div>
  <progress class="{{ cls }}" id="{{ id }}"{% if include.value %} max="100" value="{{ include.value }}"{% endif %}>{{ include.value }}{% if include.value %}%{% endif %}</progress>
</div>
{%- else -%}
<progress class="{{ cls }}" id="{{ id }}"{% if include.value %} max="100" value="{{ include.value }}"{% endif %} aria-label="{{ include.title | default: 'Выполнение' }}"></progress>
{%- endif -%}

Макрос для Jinja

{#- Индикатор выполнения. value 0–100 (None — неопределённое состояние); label включает вариант с подписью и процентом;
    variant: safety | ok; thin — тонкая полоса. -#}
{% macro progress(value=None, label=None, variant=None, thin=False, id='progress') -%}
{%- set cls = 'progress' ~ (' progress--' ~ variant if variant else '') ~ (' progress--thin' if thin else '') -%}
{%- if label -%}
<div class="progress-field">
  <div class="progress-field__head"><label for="{{ id }}">{{ label }}</label>{% if value is not none %}<span class="progress-field__value">{{ value }}%</span>{% endif %}</div>
  <progress class="{{ cls }}" id="{{ id }}"{% if value is not none %} max="100" value="{{ value }}"{% endif %}>{% if value is not none %}{{ value }}%{% endif %}</progress>
</div>
{%- else -%}
<progress class="{{ cls }}" id="{{ id }}"{% if value is not none %} max="100" value="{{ value }}"{% endif %} aria-label="Выполнение"></progress>
{%- endif -%}
{%- endmacro %}