Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
Loader
The loader is a visual representation of the UI components that are loading. It is used to improve the perceived performance of the application.
CSS : DesignSystem/_tactics/_components/_css/_common/_loader/_loader.scss
Usage
To use it, simply inject the loader component at the desired location in the DOM, adding the classes that match the variant (is-primary, is-secondary, is-tertiary) and size (is-xLarge, is-large, is-medium, is-small). To cover the entire page, add the is-fullPage class. You can also display an overlay behind the loader by adding the has-overlay class.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overlay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Full page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.