The component is deprecated and will be removed in future versions. Use CdsProgressCircle: it covers both indeterminate loading and progress.

Variations

Sizes

The size prop sets the diameter of the indicator: from xs to xl or a number in pixels. The default size is 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

The overlay prop expands the indicator to the full screen and dims the content underneath. Add fixed so that the overlay takes the nearest container with position: relative instead of the whole page. The description prop describes what is going on for screen readers (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

Props

Name	Type	Default	Description
description	string | undefined	—	Description that best explains the loading state (aria-label)
fixed	boolean | undefined	—	Pins the loader to the current container
overlay	boolean | undefined	—	Renders a fixed full-screen loader
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
theme	string | undefined	—	Component theme