mirror of https://github.com/hashicorp/consul
|
…
|
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.scss | ||
| layout.scss | ||
| skin.scss | ||
README.mdx
# Progress
Simple Progress component in lieu of a reliable/styleable cross browser
`<progress />`. Please consider making use of `aria-label` or `aria-labelled-by`.
```hbs preview-template
<Progress
aria-label="Loading"
/>
```
The animated icon also automatically supports a `prefers-reduced-motion` class/setting. The example below uses a local class just for illustration purposes in these docs. You do not need to add this class anywhere, please use the above class-less example instead.
```hbs preview-template
<Progress
class={{class-map
'prefers-reduced-motion'
}}
aria-label="Loading"
/>
```