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" value="35" />

Members

Property Name	Type	Bindable	Default	Comment
max	number \| undefined	no	100	The maximum value.
percent	number \| undefined	no	0	A read-only percentage between 0 and 100 calculated from value and max.
value	number \| undefined	no	0	The current value.
vertical	boolean \| null \| undefined	no	undefined	When true, the progress bar is displayed vertically.
disabled	boolean \| null \| undefined	no	false	Deprecated. Progress is not interactive and should not have disabled state.

	Type Name	Definition	Comment
	ProgressOrientation	'horizontal' \| 'vertical'	Used for the orientation property.

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