Примитивы

Loader

Индикатор без определённого прогресса. Обёртка — role="status" с подписью; кольцо aria-hidden, потому что крутящейся рамке нечего сказать. При prefers-reduced-motion оно продолжает вращаться: замерший спиннер читается как зависание, а не как спокойствие.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Код

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);--aura-align:center">
  <span role="status" aria-label="Loading, small">
    <span aria-hidden="true" class="aura-loader aura-loader--sm aura-anim-spin"></span>
  </span>
  <span role="status" aria-label="Loading">
    <span aria-hidden="true" class="aura-loader aura-anim-spin"></span>
  </span>
  <span role="status" aria-label="Loading, large">
    <span aria-hidden="true" class="aura-loader aura-loader--lg aura-anim-spin"></span>
  </span>
</div>

Demo.tsx

import { Group, Loader } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Group align="center">
      <Loader size="sm" label="Loading, small" />
      <Loader label="Loading" />
      <Loader size="lg" label="Loading, large" />
    </Group>
  );
}

Demo.vue

<script setup lang="ts">
import { Loader } from '@ilomee/aura-vue';
</script>

<template>
  <Loader label="Fetching releases" />
</template>

Demo.svelte

<script lang="ts">
  import { Loader } from '@ilomee/aura-svelte';
</script>

<Loader label="Fetching releases" />

Используется как aura-loader.

demo.component.ts

import { AuraLoader } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraLoader],
  template: `<aura-loader label="Fetching releases" />`,
})
export class DemoComponent {}

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
size	`'sm' \| 'md' \| 'lg'`	`'md'`
label	`string`	`'Loading'`

Имя	Тип	По умолчанию	Примечания
size	`'sm' \| 'md' \| 'lg'`	`'md'`
label	`string`	`'Loading'`

Имя	Тип	По умолчанию	Примечания
size	`'sm' \| 'md' \| 'lg'`	`'md'`
label	`string`	`'Loading'`

Имя	Тип	По умолчанию	Примечания
size	`'sm' \| 'md' \| 'lg'`	`'md'`
label	`string`	`'Loading'`

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-loader	база	Обязательный. Без него модификатор не работает.
.aura-loader--sm	модификатор
.aura-loader--lg	модификатор

Токены и правила

components.css

размер: var(--loader-sm|md|lg) — modifiers generated from the tokens
толщина: var(--loader-stroke)
движение: .aura-anim-spin