Concorde UI component — Loader. sonic-loader shows a loading animation, either in the content flow or as a viewport overlay. With no mode, it is fixed (centered overlay); use mode="inline" inside content areas. For Fetch and List, s Doc ID: core/components/ui/loader/loader. Keywords: Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component, mode, fixed, mode="inline", inline, align, left. URL: https://concorde.supersoniks.org/core/components/ui/loader.

Loader

sonic-loader shows a loading animation, either in the content flow or as a viewport overlay. With no mode, it is fixed (centered overlay); use mode="inline" inside content areas. For Fetch and List, set their loader attribute instead of adding the tag yourself.

Mode

inline renders an ellipsis animation in the document flow. fixed (default) covers the viewport with a centered animation; toggle it with the checkbox below.

<sonic-loader mode="inline"></sonic-loader>

Alignment and color

align only affects mode="inline": left · center (default) · right. Dots use --sc-primary; set currentColor to follow the host color.

<div class="grid gap-4">
      <sonic-loader mode="inline" currentColor style="color: purple;"></sonic-loader>
      <sonic-loader mode="inline" align="left"></sonic-loader>
      <sonic-loader mode="inline" align="center"></sonic-loader>
      <sonic-loader mode="inline" align="right"></sonic-loader>
    </div>

Delay

A fixed loader waits 0.5 s before fading in, so short requests show nothing. inline loaders appear at once. Set noDelay (or pass noDelay: true to Loader.show()) to show a fixed loader immediately.

<sonic-loader mode="inline" noDelay></sonic-loader>

Accessibility

The animation is aria-hidden by default so screen readers are not flooded on every request. Set announce when the loader appears after a user action: the host gets role="status", aria-live="polite" and a localized "Loading" label. For a busy button, use the loading attribute of sonic-button instead.

<div class="flex flex-wrap items-center gap-4">
      <sonic-loader mode="inline" announce></sonic-loader>
      <sonic-button loading>Confirm check-in</sonic-button>
    </div>

Show and hide programmatically

Loader.show() mounts one shared instance; Loader.hide() is reference-counted, so call it once per show(). Without container, the loader goes to the theme pop container and mode is forced to fixed.

import { Loader } from "@supersoniks/concorde/ui/loader";

Loader.show({ announce: true });
// …
Loader.hide();

// Inline loader inside a given element
Loader.show({ mode: "inline", container: document.querySelector("#results") });

API reference

No slots.