@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
33 lines (22 loc) • 1.18 kB
Markdown
#### A Spinner is a way of showing the user something is being loaded, either because of a user action or not. It should be used for short, indeterminate loading times.
### 👍 Dos
- Mind the color contrast with the background.
- For very long waiting times (10+ seconds) try giving some feedback about the progress that is being made in the background.
- If you're showing a spinner in a button make sure to make it disabled while loading.
- For very recurrent actions where the probability of success if very high consider using an optimistic approach. E.g.: a message being sent.
### 👎 Don'ts
- Only use spinners for loading times of more than 1 second. Less than that it'll cause more harm than good.
- Avoid showing too many spinners at a given time in the same screen, it'll look overwhelming.
### Related components
- If you can assess the progression of the task prefer a <a href="#/Components/Display/Progress">Progress</a>.
- For whole screen loading try using Skeleton Pages (work in progress).
#### Default
```js
<Spinner />
```
#### Custom color and size
```js
<span className="dib c-muted-1">
<Spinner color="currentColor" size={20} />
</span>
```