Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Spinner draft

Spinner component is used to indicate users that their action is being processed. You can customize the size and color of the spinner with the provided properties.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<nord-spinner size="xl"></nord-spinner>

Properties

PropertyAttributeDescriptionTypeDefault
sizesizeThe size of the spinner."xs" | "s" | "m" | "l" | "xl" | "xxl""m"
colorcolorThe color of the spinner. Can accept any valid CSS color value, including custom properties.string | undefinedundefined
labellabelAn accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.string | undefinedundefined

Usage

This section will in the future include guidelines for designers and developers about the usage of this component in different contexts.

Integration

For integration guidelines, please see Using Components. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.