Spinner
Use the spinner shortcode to indicate the loading state of a component or page.
The animation effect of this component is dependent 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 >}}The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| color | No | Optional theme color of the spinner, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”. |
| grow | No | Optional flag to indicate the spinner is growing instead of rotating, defaults to false. |
| class | No | Optional class attribute of the spinner wrapping element, e.g. “text-center”. |
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 >}}