Spinner

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

<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>

The danger modifier changes the spinner appearance to use danger colors.

  <div class="flix-spinner flix-spinner--danger"></div>

With value

<div id="spinner-play-progress" class="flix-has-text-centered">
  <div role="progressbar" class="flix-spinner flix-spinner--show-value" aria-labelledby="spinner-play-progress-label"></div>
  <h4 class="flix-h4" id="spinner-play-progress-label">Preparing...</h4>
</div>

The spinner progress can be shown with the combination of aria-valuenow and the declaration of the --flix-spinner-progress CSS variable. Their values should be synchronized at your best convenience, and this allows you to have different percentage progress for different value types.

This means your progress can be calculated in any value (e.g.: seconds, kilobytes or any arbitrary number) to be represented to the user, and the progress bar is separately shown in % of completion.

To make a progress spinner, pay attention to the following attributes and modifiers:

role="progressbar"

This role indicates that a request has been received and the application is making progress toward completing the requested action.

aria-label or aria-labelledby

The progress bar requires an accessible label.

Examples: "Loading", "Saving", "Processing", etc.

aria-valuenow

The actual value of the progressbar, this is important for screen reader users and can also be shown to the user inside the spinner.

aria-valuemin and aria-valuemax

Use these attributes to change the delimitations of the progress bar.

The default min and max values are: 0 and 100, respectively.

--flix-spinner-progress

The progress in %, this sets the visual progress on the spinner circle.

.flix-spinner--show-value

You can display the value on the "value now" attribute on larger spinners (not supported on small and medium spinners).

For small and medium spinners, you should include the value and units next to the spinner instead.

data-unit

When showing the value, you can specify the unit. Default is a percentage (%).

<div role="progressbar" class="flix-spinner flix-spinner--show-value" aria-valuenow="15" style="--flix-spinner-progress:15" aria-label="15% spinner"></div>
<div role="progressbar" class="flix-spinner flix-spinner--show-value" aria-valuenow="20" aria-valuemax="60" style="--flix-spinner-progress:33" aria-label="33% spinner with values in seconds"></div>
<div role="progressbar" class="flix-spinner flix-spinner--show-value" aria-valuenow="55" style="--flix-spinner-progress:55" aria-label="55% spinner"></div>
<div role="progressbar" class="flix-spinner flix-spinner--show-value" aria-valuenow="750" aria-valuemax="1000" data-unit="kb" style="--flix-spinner-progress:75" aria-label="75% spinner with value in kb"></div>
<div role="progressbar" class="flix-spinner flix-spinner--show-value" aria-valuenow="100" style="--flix-spinner-progress:100" aria-label="100% spinner"></div>
<div role="progressbar" class="flix-spinner flix-spinner--show-value flix-spinner--danger" aria-valuenow="100" style="--flix-spinner-progress:100" aria-label="errored spinner"></div>

If you do wish to display the value on small or medium sizes, you may display it to the side of the spinner, and associate them with the aria-labelledby attribute, like so:

<div class="flix-box flix-box--small flix-space-flush-bottom" style="display:inline-flex;align-items:center;gap:var(--flix-spacing-1)">
  <div role="progressbar" class="flix-spinner flix-spinner--sm" aria-labelledby="spinner-progress-label-1" aria-valuenow="56" style="--flix-spinner-progress:56"></div>
  <strong id="spinner-progress-label-1">56 secs</strong>
</div>
<div class="flix-box flix-box--small flix-space-flush-bottom" style="display:inline-flex;align-items:center;gap:var(--flix-spacing-1)">
  <div role="progressbar" class="flix-spinner flix-spinner--sm flix-spinner--danger" aria-labelledby="spinner-progress-label-2" aria-valuenow="6" style="--flix-spinner-progress:6"></div>
  <strong id="spinner-progress-label-2">Battery: 6%</strong>
</div>

Timer

<div id="spinner-play-timer" class="flix-box flix-box--small" style="display:inline-flex;align-items:center;gap:var(--flix-spacing-1)">
  <div role="timer" class="flix-spinner flix-spinner--sm" aria-labelledby="spinner-play-timer-label" style="--flix-spinner-progress:0"></div>
  <strong id="spinner-play-timer-label">00:30</strong>
</div>

You can use the spinner component to create timers (for example, in the booking process when a user has a limited amount of time to complete the passenger information form).

To make an accessible timer you must pay attention to the following attributes and modifiers:

role="timer"

This identifies the spinner to screen readers as a timer and sets the appropriate live region level.

aria-labelledby

The actual time value must be visible text and be associated to the the spinner with an id and the aria-labelledby attribute.

aria-live="assertive"

When the timer reaches a critical point, set the aria-live attribute to "assertive" once to announce the state to screen reader users.

Make sure to remove this afterwards to prevent the timer from interrupting the user at every update.

.flix-spinner--danger

You may also use the danger modifier to change the spinner appearance when the timer reaches a critical point to visually indicate urgency.

Notice that the timer role does not support aria-valuenow, aria-valuemin and aria-valuemax attributes, therefore it is also not possible to show the value with --show-value and this modifier simply has no effect. The timer value must always be visible to all users.

Normally timers are count down, so you can show the current count down value and then calculate the timer remaining progress accordingly.

The examples bellow assume a 60 second timer that starts on 60 and counts down to 0, when 10s is reached, the timer is considered critical and changes to danger. Add the aria-live="assertive" once to announce the critical stage to screen reader users and then remove it, to prevent nuisance.

<div class="display: grid; grid-auto-columns: min-content;">
  <div class="flix-box flix-box--small flix-space-flush-bottom" style="display:inline-flex;align-items:center;gap:var(--flix-spacing-1)">
    <div role="timer" class="flix-spinner flix-spinner--sm" style="--flix-spinner-progress:33" aria-labelledby="spinner-timer-label-1"></div>
    <strong id="spinner-timer-label-1">00:40</strong>
  </div>
  <div class="flix-box flix-box--small flix-space-flush-bottom" style="display:inline-flex;align-items:center;gap:var(--flix-spacing-1)">
    <div role="timer" class="flix-spinner flix-spinner--sm flix-spinner--danger" style="--flix-spinner-progress:83" aria-labelledby="spinner-timer-label-2"></div>
    <strong id="spinner-timer-label-2">00:10</strong>
  </div>
</div>