Server Component · 0 KB client JS

Loader

An indeterminate loading indicator in five variants, with a screen-reader label built in.

import { Loader } from "astralis-ui";

export function LoaderDemo() {
  return <Loader size="xl" />;
}

variant

size

colorScheme

label

import { Loader } from "astralis-ui";

<Loader />

Import#

import { Loader } from "astralis-ui";

Variants#

blocks is the default: the Astralis mark assembling itself. spinner is a rotating arc, dots three dots in sequence, bars an equaliser, and pulse a dot sending out rings.

blocks

spinner

dots

bars

pulse

import { HStack, Loader, Text, VStack } from "astralis-ui";

const variants = ["blocks", "spinner", "dots", "bars", "pulse"] as const;

export function LoaderVariants() {
  return (
    <HStack gap="10" wrap="wrap" justifyContent="center">
      {variants.map((variant) => (
        <VStack key={variant} gap="3" alignItems="center">
          <Loader variant={variant} size="xl" />
          <Text size="xs" color="muted">
            {variant}
          </Text>
        </VStack>
      ))}
    </HStack>
  );
}

Sizes#

import { HStack, Loader } from "astralis-ui";

export function LoaderSizes() {
  return (
    <HStack gap="6" alignItems="center">
      <Loader size="xs" />
      <Loader size="sm" />
      <Loader size="md" />
      <Loader size="lg" />
      <Loader size="xl" />
    </HStack>
  );
}

Color schemes#

Every variant paints with the accent channel, so any scheme works.

import { HStack, Loader } from "astralis-ui";

export function LoaderSchemes() {
  return (
    <HStack gap="6" alignItems="center">
      <Loader size="lg" colorScheme="brand" />
      <Loader size="lg" colorScheme="blue" variant="dots" />
      <Loader size="lg" colorScheme="green" variant="bars" />
      <Loader size="lg" colorScheme="purple" variant="pulse" />
      <Loader size="lg" colorScheme="gray" variant="spinner" />
    </HStack>
  );
}

Props#

Prop	Type	Default	Description
`variant`	`"blocks" \| "spinner" \| "dots" \| "bars" \| "pulse"`	`"blocks"`	Which animation. blocks is the Astralis mark assembling itself.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Width and height of the indicator.
`colorScheme`	`all 15 schemes`	`"brand"`	Hue of the indicator.
`label`	`string`	`"Loading…"`	Visually-hidden text announced to screen readers.

Accessibility#

Renders role="status" with a visually-hidden label, so assistive tech announces the loading state without any extra wiring.
The animation keeps running under prefers-reduced-motion, because it conveys state, not decoration. Pair long operations with Progress when you can report actual completion.