Design system

Loading content (WIP)

SVG-inlined versions

We strongly encourage to use the default version of the loader, but in smaller case, we need to embold circle strokes to make the animation more visible: .is-bold for medium size, .is-xbold for small size.

Flag Preview
Default, without flag
.is-bold
.is-xbold

Standalone images

Both versions may also exist in standalone images /assets/img/shared/loading-atom.svg, and /assets/img/shared/loading-atom-smaller.svg

Be carefull when using these, dark mode is difficult to activate on them, better using inline versions!!!

Loading states

Basically, the idea is to rely on attribute aria-busy="true".

On a div

On a button

Remember to add attribute disabled when aria-busy="true" is applied.

Examples on a table > tr/table > td

Invoices
id Amount Type Status Date Action
123456 24 € Subscription active default origin 16 Mar. 2018
123456 24 € Subscription disabled error 16 Mar. 2018

In a progress bar

Decrypting contacts: 0%

  • Just update the value attribute of the progress bar and the text explaining the action in progress.
  • Please do note the aria-atomic="true" aria-live="polite" on the container describing the current progress (helps to vocalize correctly the description).
  • Please do link progress tag to its description via aria-describedby.
  • No need for aria-busy in this case
<progress
  class="progressbar w100"
  aria-describedby="description_progress">
</progress>
<p
  aria-atomic="true" aria-live="polite"
  id="description_progress">
  Decrypting contacts: 0%
</p>

Other progress modifiers

  • Just put progressbar--success/progressbar--error/progressbar--warning modifiers when needed on progress tag.
  • These modifiers only provide color information, please link the progress bar with its live description using aria-describedby.
<progress
  class="progressbar progressbar--success w100">
</progress>
…
<progress
  class="progressbar progressbar--error w100">
</progress>
…
<progress
  class="progressbar progressbar--warning w100">
</progress>