tabler/docs/content/ui/components/spinners.md

title, summary, bootstrapLink, description

title	summary	bootstrapLink	description
Spinners	Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.	components/spinners/	Indicate loading state with spinners.

Default markup

Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.

<div class="spinner-border"></div>

Look at the example below to see how the spinner works:

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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 section.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

<div class="spinner-border text-blue" role="status"></div>
<div class="spinner-border text-red" role="status"></div>

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.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

Growing spinners also come in a variety of colors to choose from.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

<div class="spinner-grow text-blue" role="status"></div>
<div class="spinner-grow text-azure" role="status"></div>

Button with spinner

Use buttons 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.

<a href="#" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  Button
</a>

Look at the example below to see how the button with a spinner works:

{% capture html -%} Button Button Button Button Button {%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%}

Loading

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%} Loading Loading {%- endcapture %} {% include "docs/example.html" html=html centered %}