Индикатор загрузки

Индикатор загрузки показывает, что операция выполняется. Если пользователь предпочитает меньше движения, Trace CSS показывает статичный индикатор.

#Отдельный индикатор

Полная сборка включает trace-loader. Задайте отдельному индикатору роль status и доступное имя.

<span class="trace-loader" role="status" aria-label="Загрузка"></span>

#Кнопки с индикатором

Установите aria-busy="true" на нативной кнопке, чтобы показать индикатор по центру. Добавьте disabled, чтобы заблокировать нажатие до завершения операции. В полной сборке прямой потомок span.trace-icon показывает индикатор рядом с видимой подписью.

<button type="button" aria-busy="true" disabled>Сохранение</button>
<button type="button" class="trace-primary" aria-busy="true" disabled>
<span class="trace-icon" aria-hidden="true"></span>
Отправка
</button>
<button type="button" class="trace-secondary trace-outline" aria-busy="true" disabled>
<span class="trace-icon" aria-hidden="true"></span>
Загрузка
</button>
<button type="button" class="trace-icon-only" aria-label="Сохранение" aria-busy="true" disabled>
<span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
  <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" />
  <path d="M7 3v4a1 1 0 0 0 1 1h7" />
</svg>
</span>
</button>

#Индикатор поверх контента

Установите aria-busy="true" на контейнере, чтобы показать перекрывающий слой с индикатором по центру. Отключите элементы формы на время операции.

<section aria-busy="true">
  <h4>Настройки профиля</h4>
  <p>Загружаются сохранённые настройки.</p>
  <form>
    <label>
      Отображаемое имя
      <input type="text" value="Алекс" disabled />
    </label>
    <button type="button" disabled>Сохранить</button>
  </form>
</section>

Оформление кнопок задают токены кнопок.