Docs

Spinner

Last modified on June 7, 2025 • 2 min read • 322 words
Component  
Component  
Share via

Use the spinner shortcode to indicate the loading state of a component or page.

Overview   Arguments   Examples   Colored Spinner   Growing Spinner  

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.

markdown 
{{< 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.

markdown 
{{< 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.

markdown 
{{< spinner grow="true" color="info" class="text-center" >}}
Loading...
{{< /spinner >}}
On this page: