Feedback

Stable - @kikita-labs/ui v1.6.1

Loader

Directive for applying Kikita UI loading indicator styling to an inline element.

Import

Import the public directive from the published package entrypoint.

loader.ts
import { KuiLoaderDirective } from '@kikita-labs/ui';

Usage

Open in Playground

Apply kuiLoader to an inline element such as a span. The directive sets role="status" and aria-live="polite" so assistive technology announces the label.

<div class="loader-example">
  <span kuiLoader label="Loading"></span>
</div>

Sizes

Use the shared Kikita size scale to match the loader to the surrounding control or text.

<div class="loader-size-example">
  <span kuiLoader size="xs" label="Loading extra small"></span>
  <span kuiLoader size="sm" label="Loading small"></span>
  <span kuiLoader size="md" label="Loading medium"></span>
  <span kuiLoader size="lg" label="Loading large"></span>
</div>

With Button

kuiButton's own loading input (0.3.0) renders a kuiLoader internally, sets aria-busy="true", and behaves like disabled. Compose kuiLoader manually only when the button markup needs a custom saving label; otherwise prefer loading.

<div class="loader-button-example">
  <button kuiButton type="button" disabled>
    <span kuiLoader size="sm" label="Saving"></span>
    Saving
  </button>

  <button kuiButton type="button" loading>Saving</button>
</div>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg''md'Loader size mapped to Kikita UI loader tokens.
labelstring'Loading'Accessible label rendered as aria-label. Also announced through the host role="status" and aria-live="polite".
--kui-loader-sizeCSS custom property-Overrides the rendered loader diameter for the current size step.
--kui-loader-trackCSS custom property-Overrides the loader track (background ring) color.
--kui-loader-fillCSS custom property-Overrides the loader spinning fill color.
--kui-loader-border-widthCSS custom property-Overrides the loader ring stroke width.
--kui-loader-durationCSS custom property-Overrides the spin animation duration.

Accessibility

Loader announces progress through a live region instead of relying on visual motion alone.

  • The host element gets role="status" and aria-live="polite" automatically; no extra ARIA wiring is required.
  • label sets the accessible name via aria-label and defaults to Loading. Provide a specific label (for example Saving) whenever the loading context is not obvious from surrounding text.
  • Since 0.3.0, the loader keeps flex-shrink: 0 so it no longer collapses into an oval when its flex container shrinks it, such as inside a wrapped multi-line button label.
  • When composed inside a kuiButton with native disabled, the button itself communicates the busy state to assistive technology; keep disabled set for the duration of the loading state.