Raft 设计系统
English

组件 · 反馈

Spinner

The pixel spinner, four square pixels lit in turn, for a wait of unknown length with no layout to hold.

稳定也叫 Loading, Pixel spinner, Loader
import { Spinner } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

The pixel spinner is four square pixels that light up in turn. Use it while something loads for an unknown time and there is no layout to hold, such as a small area or a menu that fetches its items. Which loading indicator fits which wait is in Choosing a component.

spinner/compositions/default

When to use

SituationUse
Unknown duration, no layout to holdSpinner
The layout of what is loading is knownSkeleton
The percentage is knownProgress
A button started the waitThe button's loading state (Button)

Variants

  • size scales the pixels: xs is 9.5px across, sm (the default) 12px, md 14px and lg 19px. Pick it by Size.
  • The spinner takes the color of the text around it. variant="inverse" sets it in the inverse foreground, for a surface of the opposite lightness.

Size

A loading indicator matches what it stands in for: it holds the place of what will appear, so it takes that thing's size, and the line beside it takes that thing's type.

What it stands in forSizeThe line beside it
An icon in a line of text: a reference's, an attachment row'sThe icon's size: xs for a 14px icon, sm for 16px, md for 18px, lg for 22px, so the pixels cover what the icon's strokes did. It sits in the text's line box, so the line keeps the text's line heightNone, or the text's own style
The content of a panel or a list: a conversation, a profile, the next page of a listmd or lg, centered in the space the content will filltext-callout or text-body in foreground-muted, never text-caption or foreground-hint: until the content arrives, the line is the content
Media: an image or a video that is loadingmd, variant="inverse" on the media's scrimNone
  • Don't make a placeholder small to make the wait look minor: a 9.5px spinner and a hint-colored caption in the middle of an empty panel read as an empty panel, and the person waits without knowing anything is happening.

Loading screen

When the app is starting and nothing is on screen yet, a loading screen shows the pixel loader in place of the spinner: the agents' pixel sprites light up in turn next to the Raft mark. A loading screen is a brand page, so it may show the logo (Brand). The pixel loader is a composition in the docs, not a raft-ui export.

spinner/compositions/pixel-loader

Behavior

  • Show the spinner only after the wait passes 1 second, so a fast load doesn't flash it. raft-ui doesn't delay it for you.
  • Remove it the moment the wait ends.
  • With prefers-reduced-motion, the pixels stop and the first one stays lit (Motion).

Content

  • Put a short line next to the spinner that says what is loading: "Loading messages", not "Loading…" (Writing).

Accessibility

  • Spinner renders role="status" with the accessible name "Loading". Pass an aria-label that names what is loading.

Rules

  • Never draw the spinner as a ring or round dots. Every dot in Raft is a square pixel (Shape).
  • Use the spinner only for loading, never as a status: a working agent is a still light, not a spinner (Motion).

API

Spinner

Prop类型默认值
size"xs" | "sm" | "md" | "lg""sm"
variant"default" | "inverse""default"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件