Quaff

QLoadingIndicator

Loading indicators animate shapes to show ongoing work when progress is unknown. Display them alone or on a circular background.

Loading your files

Your workspace will be ready shortly.

info QLoadingIndicator API Source
interface QLoadingIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children">
color
?: string = undefined
Indicator color. Defaults to primary, or on-primary-container when contained.
contained
?: boolean = false
Adds a circular background behind the indicator.
containerColor
?: string = "primary-container"
Contained background color. Defaults to primary-container.
size
?: CssValue | number = "48px"
Size of the component using CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.

Usage

Use QLoadingIndicator for short waits of about 200ms to 5 seconds. For longer tasks or known progress, use QProgress.

Appearance
Add contained for a circular background. size defaults to 48px and accepts pixels as a number or a CSS length. Try sizes from 24px to 240px. color and containerColor accept theme names or CSS colors; keep at least 3:1 contrast between the shape and its background.
Contained indicator

Loading files…

Refresh Files
Show the indicator while content refreshes, then replace it with the result. Mark the content region with aria-busy and keep a persistent status message outside it. This demo finishes after a short delay; cancelling keeps the existing files.

Recent files

  • Project brief.pdf

    64 KB

  • Cover image.png

    128 KB

Two files are available. Refresh to check for updates.

Save Changes
A 24px indicator fits beside a button label. Keep the label stable, set aria-busy, and disable the action while it runs. Here the indicator is aria-hidden because the button and nearby status already describe the work. No data leaves this page.

Edit the title, then save your changes.

Loading and Accessibility
Each indicator is an indeterminate progressbar. Give it a short contextual aria-label when it conveys progress. It does not announce a percentage. Keep the action's result visible after the indicator disappears, and avoid moving keyboard focus as content updates. The animation respects reduced-motion preferences.
Privacy Policy