Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Spinner

Spinner inform users about the status of ongoing processes.

last modified: 30/09/2021 11:10:06

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.


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

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 13/06/2023 16:40:05
Accessibility
  • 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

Accessibility

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 New window and height New window.

Background

If you need multiple levels, don't change the background color, with its transparency rs-bg-skeleton is sufficient on its own

Accessibility

<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 New window
See its page New window

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

Button

Skeleton 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

Button

Branded Component

SE

Default spinner

Negative spinner

ME/COR

Default spinner

Negative spinner

last modified: 16/09/2022 12:45:14

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