Skip to content

Accessibility ​

fun-loader is accessible without any setup. This page explains what it does, and the one thing you might change.

Screen readers ​

Rotating text is a problem for screen readers: announcing a new message every couple of seconds would interrupt everything else. So:

  • The element has role="status", which screen readers treat as a polite, non-urgent update.
  • They announce a short label once, "Loading" by default.
  • The rotating messages and the icon are hidden from them, and so are stage changes on long waits.

Set a label that says what's happening:

html
<fun-loader label="Generating your summary"></fun-loader>

When the answer replaces the loader, make sure the answer itself is announced, for example by putting it inside a region with aria-live="polite".

Reduced motion ​

When someone has turned on "reduce motion" in their system settings:

  • New messages appear without sliding in.
  • The icon fades gently in and out instead of spinning or bouncing, so there's still a sign that work is happening.

You don't need to do anything for this.

Pausing ​

paused stops both the text and the icon. Use it if your interface has its own way to show that the wait is over, or to keep the loader on screen without movement.

Released under the MIT License.