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