Progress

A visual indicator of a value between a minimum and a maximum.

Code

<script lang="ts">
  import { Progress } from '@geoffcox/sterling-svelte';
</script>

<Progress max="100" percent="undefined" value="35" />

Members

Property Name	Type	Default	Comment
disabled	boolean	false	When true, the progress bar is disabled.
max	number	100	The maximum value.
percent	number	0	A read-only percentage between 0 and 100 calculated from value and max.
status	ProgressStatus	'none'	The current status of the progress.
value	number	0	The current value.
variant	string	''	Additional class names to apply
vertical	boolean	false	When true, the progress bar is displayed vertically.

	Type Name	Definition	Comment
	ProgressStatus	'none' \| 'error' \| 'warning' \| 'info' \| 'success'	Used for the Progress status property.

<div class="sterling-progress">
  <div class="container">
    <div class="indicator" />
  </div>
</div>