Skip to content
UI
v0.3.1

Search the docs

Progress

How far a job has got, or that it is running.

Example

Uploading art 64%
Quota 92%
Building the report
progress.example.svelte 
<script lang="ts">
  import { Progress } from '@onlywin/ui-svelte';
</script>

<div class="example-stack">
  <Progress label="Uploading art" value={64} showValue />
  <Progress label="Quota" value={92} tone="warning" showValue />
  <Progress label="Building the report" value={null} />
</div>

Usage

Do

  • Use it for work that takes more than a few seconds.

Don’t

  • Do not use it for a value that is not progress; use StatTile.

Accessibility

  • An SVG with the progressbar role, its label and its value as text; unknown progress moves.

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Progress props
Prop Type Default Description
label *required string —
showValue boolean true
tone 'brand' | 'danger' | 'warning' 'brand'
value *required number | null — 0-100; `null` while the amount is unknown (a moving bar).