mirror of
https://github.com/tabler/tabler.git
synced 2026-08-31 22:31:28 +04:00
76 lines
4.6 KiB
Plaintext
76 lines
4.6 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]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Default markup
|
|
|
|
Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
|
|
|
|
<Example centered>
|
|
<div class="spinner-border"></div>
|
|
</Example>
|
|
|
|
|
|
## Colors
|
|
|
|
Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
|
|
|
|
<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
|
|
|
|
Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display 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
|
|
|
|
Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
|
|
|
|
<Example centered>
|
|
<div class="spinner-grow" role="status"></div>
|
|
</Example>
|
|
|
|
Growing spinners also come in a variety of colors to choose from.
|
|
|
|
<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
|
|
|
|
Use [buttons](/ui/components/button) with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
|
|
|
|
<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
|
|
|
|
Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on a `span` element.
|
|
|
|
<Example centered>
|
|
<h1>Loading<span class="animated-dots"></span></h1>
|
|
</Example>
|
|
|
|
Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
|
|
|
|
<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>
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize spinners. The default values are:
|
|
|
|
<CodeDocs name="spinner-variables" file="core/scss/_variables.scss" />
|