mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
124 lines
4.7 KiB
Plaintext
124 lines
4.7 KiB
Plaintext
---
|
|
title: Spinner
|
|
summary: A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.
|
|
description: Show loading states with spinners. Choose between border and growing styles, change colors and sizes, or place them in buttons.
|
|
related: [/ui/components/progress, /ui/components/placeholder]
|
|
source: core/scss/ui/_loaders.scss
|
|
css-vars: spinner
|
|
classnames:
|
|
component:
|
|
- class: spinner-border
|
|
desc: Rotating ring
|
|
- class: spinner-grow
|
|
desc: Pulsing dot, a quieter alternative
|
|
color:
|
|
- class: text-{color}
|
|
desc: Any base color, for example text-primary
|
|
size:
|
|
- class: spinner-border-sm
|
|
desc: Small ring
|
|
- class: spinner-grow-sm
|
|
desc: Small dot
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Default markup
|
|
|
|
The default spinner shows that an action is in progress.
|
|
|
|
<Example centered>
|
|
<div class="spinner-border"></div>
|
|
</Example>
|
|
|
|
|
|
## Colors
|
|
|
|
Set the color with a `text-*` class from the [color palette](/ui/base/colors).
|
|
|
|
<Example centered>
|
|
<div class="spinner-border text-blue" role="status"></div>
|
|
<div class="spinner-border text-azure" role="status"></div>
|
|
<div class="spinner-border text-indigo" role="status"></div>
|
|
<div class="spinner-border text-purple" role="status"></div>
|
|
<div class="spinner-border text-pink" role="status"></div>
|
|
<div class="spinner-border text-red" role="status"></div>
|
|
<div class="spinner-border text-orange" role="status"></div>
|
|
<div class="spinner-border text-yellow" role="status"></div>
|
|
<div class="spinner-border text-lime" role="status"></div>
|
|
<div class="spinner-border text-green" role="status"></div>
|
|
<div class="spinner-border text-teal" role="status"></div>
|
|
<div class="spinner-border text-cyan" role="status"></div>
|
|
</Example>
|
|
|
|
## Size
|
|
|
|
Add `spinner-border-sm` for a smaller spinner.
|
|
|
|
<Example centered>
|
|
<div class="spinner-border" role="status"></div>
|
|
<div class="spinner-border spinner-border-sm" role="status"></div>
|
|
</Example>
|
|
|
|
## Growing spinner
|
|
|
|
The growing spinner pulses instead of rotating.
|
|
|
|
<Example centered>
|
|
<div class="spinner-grow" role="status"></div>
|
|
</Example>
|
|
|
|
It takes the same `text-*` color classes.
|
|
|
|
<Example centered>
|
|
<div class="spinner-grow text-blue" role="status"></div>
|
|
<div class="spinner-grow text-azure" role="status"></div>
|
|
<div class="spinner-grow text-indigo" role="status"></div>
|
|
<div class="spinner-grow text-purple" role="status"></div>
|
|
<div class="spinner-grow text-pink" role="status"></div>
|
|
<div class="spinner-grow text-red" role="status"></div>
|
|
<div class="spinner-grow text-orange" role="status"></div>
|
|
<div class="spinner-grow text-yellow" role="status"></div>
|
|
<div class="spinner-grow text-lime" role="status"></div>
|
|
<div class="spinner-grow text-green" role="status"></div>
|
|
<div class="spinner-grow text-teal" role="status"></div>
|
|
<div class="spinner-grow text-cyan" role="status"></div>
|
|
</Example>
|
|
|
|
## Button with spinner
|
|
|
|
Put a spinner inside a [button](/ui/components/button) while its action runs, and disable the button so it can't be clicked twice.
|
|
|
|
<Example centered>
|
|
<div class="btn-list">
|
|
<a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
|
<a href="#" class="btn btn-danger"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
|
<a href="#" class="btn btn-warning"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
|
<a href="#" class="btn btn-success"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
|
<a href="#" class="btn"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
|
</div>
|
|
</Example>
|
|
|
|
## Animated dots
|
|
|
|
Animated dots are a lighter loading indicator for inline text. Add the `.animated-dots` class to a `span`.
|
|
|
|
<Example centered>
|
|
<h1>Loading <span class="animated-dots"></span></h1>
|
|
</Example>
|
|
|
|
Animated dots also fit inside a button while its action runs.
|
|
|
|
<Example centered>
|
|
<div class="btn-list">
|
|
<a href="#" class="btn btn-primary"> Loading <span class="animated-dots"></span> </a>
|
|
<a href="#" class="btn btn-primary disabled"> Loading <span class="animated-dots"></span> </a>
|
|
</div>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- A spinner on its own says nothing. Add `role="status"` and a `visually-hidden` label such as "Loading", so the wait is announced.
|
|
- Put the spinner where the content will appear, and set `aria-busy="true"` on that container while it loads.
|
|
- Do not use a spinner for something that takes under a second. It flashes, which is more distracting than no feedback at all.
|
|
- For a wait with a known length use a [progress bar](/ui/components/progress) instead - it tells users how much is left.
|