Loader

Loader — индикатор неопределённого ожидания: три точки на подложке приподнимаются волной слева направо (компонент load-more кита Tesseract). У него нет значения, подписи и размеров: он занимает место действия или строки, пока область ждёт ответ.

Статус: draft · в системе с 2026-08 · интерактивность: none (нет)

Когда использовать

Список подгружает следующую порцию: блок ожидания стоит на месте кнопки или строки «ещё».
После действия ждём короткий ответ сервера, а структура будущего содержимого неизвестна.

Не использовать:

Ход операции измерим или её нужно назвать — используй Progress с label и value.
Структура области известна заранее — используй Skeleton, чтобы сохранить геометрию.
Ожидание относится ко всей области экрана — это состояние области loading, а не компонент.

Альтернативы:

progress — Progress показывает измеримый ход либо названное ожидание с обязательной подписью и progressbar-семантикой.
skeleton — Skeleton повторяет форму содержимого, когда она известна до загрузки.

Ожидание

Единственная форма: подложка и три точки-волна.

<!--
  🟢

  Базовый Loader показывает единственную форму из макета: подложку и три
  точки, которые по очереди приподнимаются волной слева направо.
-->

<script>
import Loader from "$lib/ui/Loader.svelte";
</script>

<Loader />

Подгрузка списка

Loader занимает место кнопки «ещё» под уже показанными строками.

Campaign 10012 — Summer promo

Campaign 10013 — Retargeting

Campaign 10014 — Brand search

<!--
  🟢

  Пример подгрузки списка: Loader стоит на месте кнопки «Load more» под уже
  показанными строками — так работает load-more в продукте. Строки условны,
  показать и убрать Loader решает композиция списка.
-->

<script>
import Loader from "$lib/ui/Loader.svelte";

const rows = ["Campaign 10012 — Summer promo", "Campaign 10013 — Retargeting", "Campaign 10014 — Brand search"];
</script>

<div style="display: grid; gap: var(--sp-1); width: var(--size-full);">
	{#each rows as row}
		<div style="padding: var(--sp-1) var(--sp-0); font-size: var(--fs-s); color: var(--c-text);">{row}</div>
	{/each}
	<div style="display: flex; justify-content: center; padding-top: var(--sp-1);">
		<Loader label="Loading more campaigns" />
	</div>
</div>