Індикатор завантаження

Індикатор завантаження показує, що операція триває. Якщо користувач віддає перевагу меншому руху, 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>

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