Компонент устарел и будет удалён в будущих версиях. Используйте CdsProgressCircle: он покрывает и неопределённую загрузку, и отображение прогресса.

Вариации

Размеры

Свойство size задаёт диаметр индикатора: от xs до xl или число в пикселях. Размер по умолчанию — md.

Sandbox Storybook

<script setup lang="ts">
import { CdsLoader } from '@central-design-system/components';

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsLoader v-for="size of sizes" :key="size" :size="size" />
  </div>
</template>

Оверлей

Свойство overlay разворачивает индикатор на весь экран и затемняет контент под ним. Добавьте fixed, чтобы оверлей занял ближайший контейнер с position: relative вместо всей страницы. Свойство description описывает происходящее для скринридеров (aria-label).

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsLoader } from '@central-design-system/components';
import { ref } from 'vue';

const loading = ref(false);

function refresh() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
}
</script>

<template>
  <div class="relative m-auto flex w-[320px] flex-col gap-2 rounded-200 bg-surface-secondary p-4">
    <span class="text-content-primary">Список товаров</span>
    <span class="text-content-secondary">Ноутбук, монитор, клавиатура, мышь</span>

    <CdsButton text="Обновить" variant="soft" color="brand" @click="refresh" />

    <CdsLoader v-if="loading" overlay fixed description="Список обновляется" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
description	string | undefined	—	Укажите описание, которое лучше всего описывает состояние загрузки (aria-label)
fixed	boolean | undefined	—	Зафиксировать загрузчик относительно текущего контейнера
overlay	boolean | undefined	—	Отображать фиксированный полноэкранный загрузчик
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
theme	string | undefined	—	Тема компонента