mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-18 07:23:09 +00:00
39 lines
1.2 KiB
Markdown
39 lines
1.2 KiB
Markdown
---
|
|
author: "Mark Dumay"
|
|
title: "Spinner"
|
|
date: 2023-01-05
|
|
description: "Use the spinner shortcode to indicate the loading state of a component or page."
|
|
group: components
|
|
layout: docs
|
|
---
|
|
|
|
## 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:
|
|
|
|
| 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”. |
|
|
{.table}
|
|
|
|
## Example
|
|
|
|
As an example, the following shortcode displays a centered spinner.
|
|
|
|
```html
|
|
{{</* spinner color="info" class="text-center" */>}}
|
|
Loading...
|
|
{{</* /spinner */>}}
|
|
```
|
|
|
|
The result looks like this:
|
|
{{< spinner color="info" class="text-center" >}}
|
|
Loading...
|
|
{{< /spinner >}}
|