Docs
Spinner
Last modified on June 7, 2025 • 2 min read • 322 wordsUse the spinner shortcode to indicate the loading state of a component or page.
Overview
Important
The animation effect of this component depends on the
prefers-reduced-motion
media query. See the reduced motion section of Bootstrap’s Accessibility Documentation .
Use the spinner
shortcode to indicate the loading state of a component or page. The inner content is used as alternative description. As an example, the following shortcode displays a centered spinner.
{{< spinner color="info" class="text-center" >}}
Loading...
{{< /spinner >}}
Arguments
The shortcode supports the following arguments:
Name | Type | Required | Default | Comment |
---|---|---|---|---|
class | string | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | ||
color | select | primary |
Theme color of the element. Supported values: [primary , secondary , success , danger , warning , info , light , dark , white , black , body , body-tertiary ]. |
|
grow | bool | Flag to indicate the spinner is growing instead of rotating. |
Name | Type | Required | Default |
---|---|---|---|
class | string | ||
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | |||
color | select | primary |
|
Theme color of the element. Supported values: [primary , secondary , success , danger , warning , info , light , dark , white , black , body , body-tertiary ]. |
|||
grow | bool | ||
Flag to indicate the spinner is growing instead of rotating. |
Examples
Change the style of your spinner with shortcode arguments.
Colored Spinner
Set the color
argument to apply a theme color to the spinner. The following shortcodes display a centered spinner for each available color.
{{< spinner color="primary" >}}Loading...{{< /spinner >}}
{{< spinner color="secondary" >}}Loading...{{< /spinner >}}
{{< spinner color="success" >}}Loading...{{< /spinner >}}
{{< spinner color="danger" >}}Loading...{{< /spinner >}}
{{< spinner color="warning" >}}Loading...{{< /spinner >}}
{{< spinner color="info" >}}Loading...{{< /spinner >}}
{{< spinner color="light" >}}Loading...{{< /spinner >}}
{{< spinner color="dark" >}}Loading...{{< /spinner >}}
{{< spinner color="white" >}}Loading...{{< /spinner >}}
{{< spinner color="black" >}}Loading...{{< /spinner >}}
Growing Spinner
Set grow
to true
to show a growing spinner.
{{< spinner grow="true" color="info" class="text-center" >}}
Loading...
{{< /spinner >}}