Spinner

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

Overview

Use the spinner shortcode to indicate the loading state of a component or page. The inner content is used as alternative description.

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
colorNoOptional theme color of the spinner, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”.
growNoOptional flag to indicate the spinner is growing instead of rotating, defaults to false.
classNoOptional class attribute of the spinner wrapping element, e.g. “text-center”.

Example

As an example, the following shortcode displays a centered spinner.

Loading...
markdown
{{< spinner color="info" class="text-center" >}}
Loading...
{{< /spinner >}}
Last updated: February 12, 2023 • Upgrade to docs v0.9 (2caaad8)