logo-icon
STWUI

Progress

Default


75%



svelte
<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%

svelte
<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%

svelte
<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