Docs
Spinner
Overview
Important
The animation effect of this component depends on the
prefers-reduced-motionmedia query. See the reduced motion section of Bootstrap’s accessibility documentation .
Regular Spinner
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 class="text-center" >}}
Loading...
{{< /spinner >}}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 >}}Custom Label
Use the label argument to provide a custom visually-hidden accessibility label. When omitted, the label defaults to the i18n key loading. The inner body content is ignored when label is set.
{{< spinner color="primary" class="text-center" label="Fetching results…" />}}Styling
Check the Bootstrap documentation for additional styling options.
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. | ||
| label | string | v2.7.0 Assistive label of the element. |
| 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. | |||
| label | string | ||
| v2.7.0 Assistive label of the element. | |||