Please don't forget to read Usage part of each element.
Spinner
expiry date: 30/04/2021
Spinner inform users about the status of ongoing processes.
Types
Spinners are an indeterminate indicator which express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.
-
Default spinner
Spinner is a circular progress indicators that inform users about the status of ongoing processes, such as submitting a form or saving updates. It's tied to user-triggered actions.

-
Skeleton
Skeleton are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet. They should only appear for only a few seconds, disappearing once components and content populate the page.
Default spinner overview
After the user action, the spinner will replace the content and be center on the interface. Spinners attract attention because of their animation so they should be used sparingly. Ideally, only one spinner should be used at a time.

Font differentiation by Business Unit
A font differentiatity is applied by Business Unit:

Residential

Business

Enterprise
Skeleton overview
Only use skeleton on container-based components like panels, data tables, buttons,... Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton. Elements inside a modal may have a skeleton state, but the modal itself should not.

Sizes and colors
- role="alert" must be set with an aria-live="polite" . The screen reader will alert the user something is loading if he is not busy somewhere else on the page.
- The spinner must have an explicite aria-label attribute;
- The spinner must have an explicite title attribute and usually the same as the aria-label ;
- The spinner must have an aria-busy="true" attribute. When the content is loaded you have to set the aria-busy on false.
Default spinner
To built a spinner on your page, put a <div>
with rs-spinner
class.
By default, the spinner is centered. But if you want it on the left, just add rs-no-margin-left
class.
Negative spinner
To have negative spinner just put rs-spinner-neg
instead of rs-spinner
.
Spinner overlayer
For the spinner inside overlayer:
- The spinner must have an explicite aria-label attribute;
- The spinner must have an explicite title attribute and usually the same as the aria-label ;
- The spinner must have an aria-busy="true" attribute. When the content is loaded you have to set the aria-busy on false.
For the overlayer: change role="dialog"
to role="alert"
in the overlayer.
Be careful this overlayer doesn't take the others overlayer accessibility attributes
Skeleton
A skeleton is designed by panel
combined with rs-bg-skeleton
. You can use it with the width and height .
If you need multiple levels, don't change the background color, with its transparency rs-bg-skeleton
is sufficient on its own
<section> where the skeleton is set must contain those attributes:
-
role="alert"
-
aria-live="polite"
-
aria-busy="true"
. Must be set to false when the content is loaded. -
aria-label
translated in all langages:- FR: Votre contenu est en cours de chargement
- EN: Your content is loading
- NL: Uw inhoud wordt geladen
- DE: Ihr Inhalt wird geladen
See a concrete exemple of skeleton
See its page
Title
Curabitur sed hendrerit quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id massa vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan vulputate arcu et auctor nulla vestibulum id. Sed
ButtonSkeleton animation
Add rs-anim-loading
class on the element who needs the animation.
Title
Curabitur sed hendrerit quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id massa vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan vulputate arcu et auctor nulla vestibulum id. Sed
ButtonBranded Component
SE
Default spinner
Negative spinner
ME/COR
Default spinner
Negative spinner
Deprecated
The spinner below is not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.
Class rs-icon-spin
Configuration metadata (SpinnerComponent)
Selector: lib-spinner
Class: SpinnerComponent
e2e testing Id: None
Use case example
Inputs
Name | Type | Default | Required | Description |
---|---|---|---|---|
isNegative | boolean | false | No | Defines light/dark style of the component |
alignment | 'LEFT' | 'RIGHT' | 'CENTER' | 'NONE' | 'NONE' | No | Horizontal component alignment |
Outputs
None
Models
None
Configuration metadata (SpinnerOverlayComponent)
Selector: lib-spinner-overlay
Class: SpinnerOverlayComponent
e2e testing Id: None
Use case example
NOT AVAILABLE LIVE PREVIEW
Inputs
Name | Type | Default | Required | Description |
---|---|---|---|---|
popUpID | string | jsrs-loadingDialog | No | Component id |
ariaLabel | string | undefined | No | Accessibility label |
modalTitle | string | undefined | No | Title attribute |
showOverlayer | boolean | false | No | Show/hide modal |
Outputs
None
Models
None