Progress

The Progress component indicates the completion progress of a task or process.

Import

<script>
  import { Progress } from 'svelte-fluentui';
</script>
svelte

Basic Usage

<Progress value={50} max={100} />
svelte

With Label

<Progress label="Download progress" value={75} max={100} />
svelte

Indeterminate Progress

<Progress indeterminate />
svelte

Circular Progress

<Progress variant="circular" value={60} />
svelte

Properties

PropertyTypeDefaultDescription
valuenumber0Current progress value
maxnumber100Maximum progress value
variant'linear' | 'circular''linear'Progress bar style
indeterminatebooleanfalseShow indeterminate progress
labelstringundefinedProgress label

Events

EventDescription
on:completeFired when progress reaches maximum
Last update at: Invalid Date