Элементы

Индикатор ожидания

Пульсирующие полосы или мигающий блок в духе терминала; role="status" и скрытый текст для скринридеров.

spinner с версии 0.1.0

Примеры

Полосы

<span class="spinner" role="status">
  <span class="spinner__bars" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
  <span class="visually-hidden">Загрузка…</span>
</span>

Мигающий блок с подписью

Подключение к встрече

<span class="spinner spinner--safety" role="status">
  <span class="spinner__block" aria-hidden="true"></span>
  <span class="spinner__label">Подключение к встрече</span>
</span>

Крупный

<span class="spinner spinner--lg" role="status">
  <span class="spinner__bars" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
  <span class="visually-hidden">Загружается запись встречи</span>
</span>

Установка

bukatchuk-ui add spinner

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

Файл	Назначение
`spinner.css`	стили
`example.html`	образец разметки, в проект не копируется
`spinner.jekyll.html`	вставка для Jekyll
`spinner.jinja.html`	вставка для Jinja

Варианты

Класс	Назначение
`spinner--safety`
`spinner--lg`

Вставка для Jekyll

{%- comment -%}
  Индикатор ожидания. Параметры: text (подпись; если не задана — скрытый текст «Загрузка…»),
  kind (bars | block), variant (safety), size (lg).
{%- endcomment -%}
{%- assign cls = 'spinner' -%}
{%- if include.variant %}{% assign cls = cls | append: ' spinner--' | append: include.variant %}{% endif -%}
{%- if include.size %}{% assign cls = cls | append: ' spinner--' | append: include.size %}{% endif -%}
<span class="{{ cls }}" role="status">
  {%- if include.kind == 'block' %}
  <span class="spinner__block" aria-hidden="true"></span>
  {%- else %}
  <span class="spinner__bars" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
  {%- endif %}
  {%- if include.text %}<span class="spinner__label">{{ include.text }}</span>{% else %}<span class="visually-hidden">Загрузка…</span>{% endif %}
</span>

Макрос для Jinja

{#- Индикатор ожидания. text — подпись (иначе скрытый «Загрузка…»); kind: bars | block; variant: safety; size: lg. -#}
{% macro spinner(text=None, kind='bars', variant=None, size=None) -%}
<span class="spinner{{ ' spinner--' ~ variant if variant }}{{ ' spinner--' ~ size if size }}" role="status">
  {%- if kind == 'block' %}
  <span class="spinner__block" aria-hidden="true"></span>
  {%- else %}
  <span class="spinner__bars" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
  {%- endif %}
  {%- if text %}<span class="spinner__label">{{ text }}</span>{% else %}<span class="visually-hidden">Загрузка…</span>{% endif %}
</span>
{%- endmacro %}