Loader

Demos

The two strokes of the mark fade and grow in turn.

Usage

Use the loader while a page, a panel, or a result is loading and you can't show its layout yet. If you know the layout, use a Skeleton. If you know how far along it is, use a Progress bar.

Import it from @workspace/ui/predict/loader.

Anatomy

Strokes — The two strokes of the PREDICT mark, in brand purple (#8504FE). The second starts a little after the first.

Notes

It has role="status" and the label "Loading", so screen readers announce it. Change the label with aria-label, such as "Loading results".
Inside a control that already has text, such as a button, pass aria-hidden and role={undefined} so it isn't announced twice.
The colour is fixed to brand purple and doesn't follow the text colour.

Examples

Sizes

16, 24, and 40 pixels. The default is 24.

"use client"

import { PredictLoader } from "@workspace/ui/predict/loader"

export function LoaderSizes() {
  return (
    <div className="flex items-end gap-8">
      <PredictLoader size={16} />
      <PredictLoader size={24} />
      <PredictLoader size={40} />
    </div>
  )
}

Speed

duration is the length of one loop in seconds. The default is 1.4.

0.8s

1.4s

2.4s

"use client"

import { PredictLoader } from "@workspace/ui/predict/loader"

const durations = [0.8, 1.4, 2.4]

export function LoaderSpeed() {
  return (
    <div className="flex items-end gap-10">
      {durations.map((duration) => (
        <div key={duration} className="flex flex-col items-center gap-2">
          <PredictLoader size={32} duration={duration} />
          <span className="text-muted-foreground font-mono text-xs">{duration}s</span>
        </div>
      ))}
    </div>
  )
}

In a button

Show the loader at the start of a disabled button while an action runs.

"use client"

import { Button } from "@workspace/ui/components/button"
import { PredictLoader } from "@workspace/ui/predict/loader"

export function LoaderButton() {
  return (
    <Button variant="outline" disabled>
      <PredictLoader size={16} aria-hidden role={undefined} data-icon="inline-start" />
      Analysing results
    </Button>
  )
}

Props

Unlisted props pass through to the svg element.

PredictLoader

Prop	Type	Default	Description
`size`	`number`	`24`	Width and height in pixels.
`duration`	`number`	`1.4`	Length of one loop in seconds.
`aria-label`	`string`	`Loading`	What is loading.