Progress

Linear progress bars (striped, animated, vertical, labelled) and circular progress.

Progress

Progress

Vue

<div class="thl-stack">
  <ThlProgress :value="25" /><ThlProgress :value="50" color="success" label /><ThlProgress :value="75" color="warning" striped animated /><ThlProgress :value="90" color="danger" size="lg" label="90% Complete" />
  <div class="thl-demo-row"><ThlProgressCircle v-for="(v, i) in [30, 60, 90]" :key="v" :value="v" :color="['primary','success','danger'][i]" :size="100" /></div>
</div>

React

<Progress value={50} color="success" label />
<Progress value={75} color="warning" striped animated />
<ProgressCircle value={60} color="success" size={100} />

Angular

<thl-progress [value]="50" color="success" [label]="true" />
<thl-progress [value]="75" color="warning" striped animated />
<thl-progress-circle [value]="60" color="success" [size]="100" />

API

Progress

<ThlProgress> · import { ThlProgress } from '@thl-ui/vue'

Prop	Type	Default
value*	number	—
max	number	100
color	string	—
size	string	—
striped	boolean	—
animated	boolean	—
vertical	boolean	—
label	any	—

ProgressCircle

<ThlProgressCircle> · import { ThlProgressCircle } from '@thl-ui/vue'

Prop	Type	Default
value*	number	—
max	number	100
size	number	120
stroke	number	8
color	string	"primary"
label	string	—
ariaLabel	string	—

Slots: default