Feedback

Spinner

An inline loading indicator for buttons, sections and overlays.

<script>
  import { Spinner } from "@codeatlasdev/ui";
</script>

<Spinner size={24} />

The spinner has role="status" and a localized aria-label. Under prefers-reduced-motion it slows down instead of stopping. For buttons, prefer Button’s loading prop, which swaps the leading icon for a spinner and sets aria-busy.

Sizes

The size prop takes a number of pixels or any CSS length.

Code

<script lang="ts">
  import { Spinner, Row } from '@codeatlasdev/ui';
</script>

<Row gap={24} align="center">
  <Spinner size={16} />
  <Spinner size={24} />
  <Spinner size={40} />
</Row>

In a button

Use the loading prop of Button instead of placing a Spinner by hand.

Code

<script lang="ts">
  import { Button } from '@codeatlasdev/ui';

  let loading = $state(false);
  function simulate() {
    loading = true;
    setTimeout(() => (loading = false), 2000);
  }
</script>

<Button onclick={simulate} {loading}>{loading ? 'Saving…' : 'Save changes'}</Button>

Section loader

Loading data…

Code

<script lang="ts">
  import { Spinner, GlassCard, Stack } from '@codeatlasdev/ui';
</script>

<GlassCard padding="40px" full>
  <Stack align="center" gap={12}>
    <Spinner size={40} />
    <span class="text">Loading data…</span>
  </Stack>
</GlassCard>

<style>
  .text { font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Props

Prop	Type	Default	Description
`size`	`number \| string`	`24`	Diameter. Numbers are pixels; strings are any CSS length.
`label`	`string`	`'Loading…' (localized)`	Accessible label. Defaults to the active locale's string.
`class`	`string`	`''`	Extra CSS classes.