Skip to main content
LocalTapiola Turva

Spinner ready

Spinners are used to indicate users that their action is being processed. Duet’s spinner is built entirely with HTML and CSS, and doesn’t rely on JavaScript.

You can customize the size and color of the spinner with the provided properties. Spinner comes in three sizes: small, medium and large.

Examples

Open in new window
<duet-spinner size="small" color="color-primary"></duet-spinner>
Open in new window
<duet-spinner size="medium" color="color-primary"></duet-spinner>
Open in new window
<duet-spinner size="large" color="color-primary"></duet-spinner>

Properties #

PropertyAttributeDescriptionTypeDefault
accessibleLabelaccessible-labelAdds accessible label for the spinner that is only shown for screen readers.stringundefined
colorcolorColor of the spinner, as a design token entered in camelCase or kebab-case. Example: "color-primary".string"color-gray-lightest"
sizesizeSize variation of the spinner. Can be one of: "small", "medium", "large".string"small"

Dependencies #

Used by #

Graph #

graph TD;
  duet-button --> duet-spinner
  style duet-spinner fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.