Progress

Live demo

Weekly goal4 of 5 sessions

Storage42%

CourseComplete

How to use it

A labelled linear progress bar for goals, uploads and limits.

Provide value (0 to 100), label, and optionally valueText ("4 of 5 sessions") or showValue={false}.
The fill uses the theme's spark color and eases in on first view.

Don't: use it for indeterminate waits (use Button loading), or stack more than three.

In every theme

Follows the mode picked in the header.

Graphite

Weekly goal4 of 5 sessions

Glass

Weekly goal4 of 5 sessions

Paper

Weekly goal4 of 5 sessions

Mineral

Weekly goal4 of 5 sessions

Enamel

Weekly goal4 of 5 sessions

Ember

Weekly goal4 of 5 sessions

Code

React

import { Progress } from 'enma/react';

<Progress value={80} label="Weekly goal" valueText="4 of 5 sessions" />

Plain HTML

<div class="e-progress">
  <div class="e-progress__head"><span id="goal">Weekly goal</span><span class="e-progress__value">4 of 5 sessions</span></div>
  <div class="e-progress__track" role="progressbar" aria-labelledby="goal" aria-valuemin="0" aria-valuemax="100"
    aria-valuenow="80" aria-valuetext="4 of 5 sessions"><div class="e-progress__fill" style="width:80%"></div></div>
</div>

Props

`ProgressProps`

Props of ProgressProps
Prop	Type	Default
`value` required	number
`label`	React.ReactNode
`valueText`	string
`showValue`	boolean	true
`className`	string
`style`	React.CSSProperties