Spinner

Overview

The spinner component indicates that an action is in progress and the user needs to wait. It visually represents that a process is ongoing and will inform the user of the completion or failure of the action when it ends.

Basic usage

Importing the component

Import the spinner component and its associated styles into your application.

                                                        
                                                        
                                                            import { DsSpinner } from "@coloplast/design-system";
                                                        import "@coloplast/design-system/dist/components/spinner/ds-spinner.css";
                                                        
                                                            

Example usage

Here’s how to use the spinner component in your Vue template. The spinner is controlled by props such as display-mode, label, and status.

                                                        
                                                        
                                                            <DsSpinner display-mode="default" label="Loading&hellip;" status="loading" />
                                                        
                                                            

The spinner is stateless and entirely driven by props. To trigger the spinner, adjust the status prop to "loading". Once the action is complete, set the status prop to "completed" and, after a short delay, reset it to "hidden".

It’s recommended to use a global state management tool like Vuex or Pinia to manage the spinner's lifecycle across your application.

Component playground and props

Explore the component’s functionality and adjust its props in the interactive Storybook example. You can also view the Spinner documentation in Storybook for more detailed usage and controls.

Accessibility

The spinner component is designed with accessibility in mind. It communicates to screen reader users through the role="status" attribute, which defines a live region that updates dynamically.

While the spinner is active, the aria-live="assertive" attribute ensures the screen reader informs users that an action is occurring.

The component’s label, provided via the label or accessibilityLabel prop, lets users know what the spinner represents. When the action is complete, the aria-live setting changes to "polite", and the aria-label is updated to reflect the completion, using the accessibilityLabelComplete prop.

It’s essential to always provide a text label, as this benefits both screen reader users and other users by clarifying why they are waiting.

Internationalisation

Labels and accessibility attributes can be managed via props to accommodate different languages.