Skip to main content

Progress

A progress bar with deterministic and indeterminate modes plus semantic colour variants.

Import

import { Progress } from '@synapse-ui/progress';

Basic Usage

<synapse-progress [value]="75" label="Uploading" [showValue]="true"></synapse-progress>

Inputs

InputTypeDefaultDescription
valuenumber0Progress value (0–100)
indeterminatebooleanfalseInfinite sliding animation
variant'default' | 'success' | 'warning' | 'error''default'Fill colour
labelstring | undefinedText label above the bar
showValuebooleanfalseShows the numeric percentage value