Spinner
Use the spinner shortcode to indicate the loading state of a component or page.
Important
The animation effect of this component depends on the
prefers-reduced-motionmedia 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 >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | Class attribute of the wrapping element, e.g. text-center. |
||
| color | select | primary | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black]. | |
| grow | bool | false | Flag to indicate the spinner is growing instead of rotating. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
Class attribute of the wrapping element, e.g. text-center. |
|||
| color | select | primary | |
| Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black]. | |||
| grow | bool | false | |
| Flag to indicate the spinner is growing instead of rotating. | |||
Change the style of your spinner with shortcode arguments.
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 >}}Set grow to true to show a growing spinner.
{{< spinner grow="true" color="info" class="text-center" >}}
Loading...
{{< /spinner >}}