Progress
Progress bar can be used to show the progress of a task or to show the passing of time.
Usage
import { Progress } from 'stwui';
import Progress from 'stwui/progress';
<script lang="ts">
import { Progress } from 'stwui';
</script>
<Progress value={25} />
<Progress value={50} />
<Progress value={75} displayValue />
<Progress value={100} />
<Progress value={0} indeterminate />
Radial and Size
<script lang="ts">
import { Progress } from 'stwui';
</script>
<Progress value={25} size="xs" />
<Progress value={50} size="sm" />
<Progress value={75} />
<Progress value={85} size="lg" />
<Progress value={100} size="xl" />
<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" />
<Progress value={75} type="success" />
<Progress value={75} type="warn" />
<Progress value={75} />
<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 | 0 |
| type | 'info' | 'warn' | 'error' | 'success' | info |
| radial | boolean | false |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
| displayValue | boolean | false |
| indeterminate (only for linear progress) | boolean | false |
Progress Class Identifiers
| stwui-progress |
| stwui-progress-radial |
