Spinner

A Spinner is a graphic element that helps communicating to users that an action is in progress and it will take some time to be completed.

Table of contents

• Code examples

<Spinner />
<Spinner />
Hide source

Code examples

With text

It’s possible to use the Spinner with other elements. A very common pattern is using it together with text.

<div>
  Loading <Spinner />
</div>
<div>
  Loading <Spinner />
</div>
Hide source

Another good example of the Spinner being used with other components is the loading state of Forma 36’s button.