Skip to content
Flickering Dots
Create a set
Docs · Reference

Accessibility

Indicators are motion. Make sure they never get in the way.

  • The package honours prefers-reduced-motion by showing a still frame with no playback: the busiest frame, or the calm frame a recipe names, such as the shimmer at rest. Success and error show their finished mark instead, the frame they settle on, so the cross never shakes. Pass reduced to force it.
  • Ship exports let you choose first frame, busiest frame or hide for reduced motion.
  • The indicator has role="img" and an aria-label with the current state, or your own label. Pair it with a text phrase for screen readers.
  • Keep on/off contrast at 3:1 or more against the ground.
  • Avoid flashing faster than three times per second across large grids.
tsx
<DotIndicator set="pulse" state="thinking" reduced label="Thinking" />
Reduced motion · single frame

Open-source dot-matrix loading, thinking and typing indicators for React, Vue, Svelte, Web Components and more.

MIT licensed. Install with npm i flickering-dots