Progress

Simple Progress component in lieu of a reliable/styleable cross browser <progress />. Please consider making use of aria-label or aria-labelled-by.

<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.

<Progress
  class={{class-map
    'prefers-reduced-motion'
  }}
  aria-label="Loading"
/>