Progress
Progress bar can be used to show the progress of a task or to show the passing of time.
Default
75%
<script lang="ts">
import { Progress } from 'stwui';
</script>
<Progress value={25} />
<br />
<Progress value={50} />
<br />
<Progress value={75} displayValue />
<br />
<Progress value={100} />
<br />
<Progress value={0} indeterminate />Radial and Size
<script lang="ts">
import { Progress } from 'stwui';
</script>
<Progress value={25} size="xs" />
<br />
<Progress value={50} size="sm" />
<br />
<Progress value={75} />
<br />
<Progress value={85} size="lg" />
<br />
<Progress value={100} size="xl" />
<br />
<Progress value={25} radial size="xs" />
<Progress value={50} radial size="sm" />
<Progress value={75} radial />
<Progress value={85} radial size="lg" />
<Progress value={100} radial size="xl" />Progress with Type
<script lang="ts">
import { Progress } from 'stwui';
</script>
<Progress value={75} type="error" />
<br />
<Progress value={75} type="success" />
<br />
<Progress value={75} type="warn" />
<br />
<Progress value={75} />
<br />
<Progress value={75} radial type="error" />
<Progress value={75} radial type="success" />
<Progress value={75} radial type="warn" />
<Progress value={75} radial />Progress Props
| value | number | |
| type | 'info' | 'warn' | 'error' | 'success' | info |
| radial | boolean | false |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
| displayValue | boolean | false |
| indeterminate | boolean | false |