consul/ui/packages/consul-ui/app/components/progress
John Cowen 5ab7e48862
ui: Native CSS Icon Composition (#12461)
This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
2022-03-15 12:54:14 +00:00
..
README.mdx ui: Native CSS Icon Composition (#12461) 2022-03-15 12:54:14 +00:00
index.hbs ui: Native CSS Icon Composition (#12461) 2022-03-15 12:54:14 +00:00
index.scss
layout.scss ui: Native CSS Icon Composition (#12461) 2022-03-15 12:54:14 +00:00
skin.scss ui: Native CSS Icon Composition (#12461) 2022-03-15 12:54:14 +00:00

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"
/>
```