Progress
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
25%
50%
75%
85%
100%
<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
75%
75%
75%
75%
<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 |