Loader

Kaeso's spinner: three routes on a ring, the lead in full color, advancing a third of a turn per 800ms beat. In controls it shows only once work has taken 300ms, then for at least 400ms.

View source
Saving provider…
import { Loader, Spinner, useDelayedLoading } from "@logicplanes/kaeso-ui";

Props

  • delay
    number | boolean

    Waits before the spinner and its label show, so quick work shows nothing: true for the library's 300ms (useDelayedLoading), or milliseconds. None by default.

  • hideLabel
    boolean

    Keeps label for assistive technology only, where the page around it already says what is happening.

  • label
    string

    Shown beside the spinner ("Saving provider…"); without one, "Loading" is announced in the provider's language.

  • loading
    boolean = true

    Whether the work is underway; true by default. With delay and minDuration, it times the spinner.

  • minDuration
    number

    Once shown, they stay at least this many milliseconds: 400 with a delay, 0 without.

  • size
    "md" | "xs" | "sm" | "lg" | "xl" = sm

    The loader's size on the type scale.

  • tone
    "secondary" | "tertiary" | "current"

    The spinner's and the label's color: secondary by default.