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
containerBooleanNoWhether to create a container for the loader

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 ​

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

No container ​

By default the <fw-loader /> component creates a container that takes up 100% of its parent's height. You can disable this by passing a :container="false" property. The loader renders centered in the middle of the first parent that has position: relative set.

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

Using this component

A11y Checklist ​

Accessible loader ​

Test this component in isolation against WCAG2 criteria