Spinner

<div aria-busy="true" aria-live="polite">
  <div class="flix-spinner flix-spinner--sm"></div>
  <div class="flix-spinner flix-spinner--md"></div>
  <div class="flix-spinner flix-spinner--lg"></div>
  <div class="flix-spinner flix-spinner--xl"></div>
  <div class="flix-spinner flix-spinner--xxl"></div>
</div>

Details

The spinner is available in 5 sizes accessible via modifiers sm, md , lg, xl, xxl.

Accessibility

Set aria-live="polite" and aria-busy="true" to your container while it's loading.

This will inform assistive technologies of the current container state and tell users once it's updated.

Once the loading is finished and your container's content is loaded, switch aria-busy to "false".