Funkwhale UI

Appearance

ts
import Loader from '~/ui/Loader.vue'

Loader ​

Loaders visually indicate when an operation is loading. This makes it visually clear that the user can't interact with the element until the loading process is complete.

Maintaining component accessibility ​

To ensure the loader component remains accessible:

  1. Verify the loader has an appropriate ARIA live region to announce its state
  2. Test that the loading state is properly announced by screen readers
  3. Ensure the loader has sufficient color contrast against its background
  4. Verify the loader animation stops after 4.9s to avoid excessive motion
  5. Confirm that any interactive elements are properly disabled during loading

For Authors and Designers ​

A11y Checklist ​

PropData typeRequired?Description
overlayBooleanNoCover the nearest position: relative ancestor and dim the content behind it

NOTE

To avoid extended periods of distraction, the spinner animation stops after 4.9s.

Continuous movement is distracting for some users and not necessary to convey the ongoing loading state. A load time beyond 5s is very unlinkely and would usually indicate lost connection or an unhandled error. In either case, the user cannot expect to see results eventually, so the animated spinner would give a false impression.

Normal loader ​

By default, the loader centers itself in-place, within its own normal document flow position. It doesn't require any positioned ancestor.

template
<div style="width: 50%">
  <Loader />
</div>

Overlay ​

Pass overlay to have the loader cover the nearest position: relative ancestor and dim the content behind it — useful when you want to keep showing stale content while it refreshes.

template
<div style="position: relative">
  <div style="width: 50%">
    <Loader overlay />
  </div>
</div>

Using this component

A11y Checklist ​

Accessible loader ​

Test this component in isolation against WCAG2 criteria