Spinner
Spinners are used to show the user when the program is busy processing. They are most useful when retrieving data or during computations to show that the program has not frozen or become unresponsive. An area may be blank because the data has not yet been retrieved.
Interactive Playground
The Interactive Playground allows you to experiment with various spinner sizes. Once you get the results you want, copy the HTML or React code provided and paste it into your application.
Anatomy
A spinner appears as an element without any labels or icons. It is displayed in front of other layers in the affected region and remains until the process is completed when the data is shown, or the program will allow further input.
Spinner:
A circular icon with a gap on one side. The icon turns clockwise to show it is still processing.
Behavior
A spinner may be used on an entire page, on a region, or on a component to show that it is busy processing or loading data. Multiple spinners may appear on a page at the same time if multiple regions are busy. As it is an icon, it can be combined with other components for added visibility.
DO: Use a spinner to indicate loading states within components or actions.
DON'T: Do not use a spinner to indicate a section is loading. Use a Shimmer instead.
Specs
There are 3 sizes of spinners. Select the one that is the best fit for the amount of space available to display it. The small size has a diameter of 16 pixels, the medium is 32 pixels, and the largest is 48 pixels.
