component

Progress

The Progress component displays a circular progress indicator, useful for showing the status of a task or operation. It is commonly used to represent an undetermined wait time or to visualize the progress of a process.

Set Up #

To use the Progress component, import it into your Svelte file:

<script>
	import { Progress } from '@sans-ui/core';
</script>

Usage #

The Progress component visualizes progress using a circular gauge. You can set the value prop to indicate the current progress percentage.

<script>
	import { Progress } from '@sans-ui/core';
</script>

<Progress value={70} />

Variant #

Use the variant prop to change the color theme of the Progress component. The available variants include primary, secondary, success, warning, and danger.

<script>
	import { Progress } from '@sans-ui/core';
</script>

<Progress variant="primary" />
<Progress variant="secondary" />
<Progress variant="success" />
<Progress variant="warning" />
<Progress variant="danger" />

Size #

Adjust the size of the Progress component using the size prop, specified in pixels.

<script>
	import { Progress } from '@sans-ui/core';
</script>

<Progress size={100} />

Track Width #

Customize the width of the progress track with the trackWidth prop, specified in pixels.

<script>
	import { Progress } from '@sans-ui/core';
</script>

<Progress size={10} />

Custom Inner Label #

The customInnerLabel prop allows you to display a custom label inside the progress circle.

<script>
	import { Progress } from '@sans-ui/core';
</script>

<Progress value={40} customInnerLabel="40 Mbps" />

Accessibility #

• Exposed to assistive technology as a progress bar via ARIA.
• Internationalized number formatting as a percentage or value.
• Exposes the "aria-valuenow", "aria-valuemin", "aria-valuemax" and `aria-valuetext` `attributes`

API #

Progress provides APIs(Properties) that is necessary for you to configure a Progress compponent.

Progress Props #

Progress Slots #