Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Indicate a loading state and prevent interactivity behind it
.loader-xs and loader-sm classes for sizes are deprecated and will be replace with respectively .loader-16 and .loader-40.
<div class="spinner-bg"> <div class="loading-modal"> <div role="status" aria-live="polite" class="loader m-auto"> <span class="visually-hidden">Loading…</span> </div> </div> </div>
Make sure the @swisspost/design-system-styles package is already present in your project
or follow the installation guidelines.
To import all Design System styles:
@use '@swisspost/design-system-styles/index.scss';
To import only the styles required for this component:
@use '@swisspost/design-system-styles/basics.scss'; @use '@swisspost/design-system-styles/components/spinner.scss';
Live region should be added at page load and the content should change dynamically.
See what it means in practice on the live region section of the accessibility page.
When a spinner is placed inside an element with a position-relative class, it'll block interactivity on all the child elements and will be centered on the content.
There is some continous text here as an example. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Adding a spinner inside a button allows you to show that an action is processing. Combined with a disabled attribute, it indicates to the user to wait for an action to finish and prevents the user to trigger multiple time the action.