Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Spinner

Spinner

A spinner is a visual indicator that a process is occurring in the background but that the interface is not yet ready for interaction.

Preview

Figma
Preview spinner

Uses

They are used when information takes a long time to process and appear on the screen to retrieve data or perform slow calculations, and help notify users that the load is ongoing. Although it does not provide details about what is happening in the back-end, it assures the user that their action is being processed. In its Big version, the action temporarily disables the entire application since user data is being saved and sent. In its Small version it can be specific to a specific area of the web and not deactivate the rest of the functionalities.

When to use

When you are already on a screen and have requested an action or process. When the information takes a long time to process and appear on the screen. When the information takes a long time to process and appear on the screen. For punctual loads. If you want to notify the user that an action is in progress and you must wait for it to finish. If you want to notify the user that an action is in progress and you must wait for it to finish.

Behaviour

Types

Visualization of the behavior of the Spinner type Indeterminate
Indeterminate
Visualization of the behavior of the Determinated Spinner
Determinated

Size

Visualization of the behavior of the Spinner size big
Big
Visualization of the behavior of the Spinner small size
Small

Content

Visualization of the behavior of the Spinner with basic content
Basic
Viewing the behavior of the Spinner with content Title + Description
Title + Description
Viewing the behavior of the Spinner with content Title
Title
Visualization of the behavior of the Spinner with content Description
Description

Fund

Visualization of the behavior of the Spinner with modal overlay background
Overlay Modal
Visualization of the behavior of the Spinner with white background
White

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

Spinner is a custom item with an animated load indicator inside. To communicate to the user the state of charge, use the aria-live attribute. To communicate to the user the state of charge, use the aria-live attribute. To communicate to the user the state of charge, use the aria-live attribute. To communicate to the user the state of charge, use the aria-live attribute. It has the aria-valuemax property adjusted to a decimal value greater than aria-valuemin. Since the progress bar has a visible label, it is referred to by aria-labelledby in the element with role="progressbar". While the spinner element is loading it has the aria-busy property set to true. This indicates that an item is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. It has tabindex="0" to make it possible to access it using the tab key or to move the focus by programming.
NextGenerationEU European Union Funding Logo Transformation and Resiuliency Recovery Plan Logo Spain digital logo Support Accesibility Sitemap Privacy Policy Cookie Policy

This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.