@synapse-ui/progress

Angular progress bar with determinate and indeterminate modes, four variants, and an optional label.

Installation

npm install @synapse-ui/progress

Usage

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

@Component({
  imports: [Progress],
  template: `
    <!-- Determinate -->
    <synapse-progress [value]="uploadPct" label="Uploading..." [showValue]="true" />

    <!-- Indeterminate -->
    <synapse-progress [indeterminate]="true" variant="success" />
  `,
})
export class MyComponent {
  uploadPct = 42;
}

Inputs

| Input | Type | Default | Description | | --------------- | ------------------------------------------------ | ----------- | ---------------------------------------- | | value | number | 0 | Progress value (0–100, clamped) | | indeterminate | boolean | false | Shows an animated indeterminate bar | | variant | 'default' \| 'success' \| 'warning' \| 'error' | 'default' | Color variant | | label | string \| undefined | undefined | Accessible label shown above the bar | | showValue | boolean | false | Appends the percentage next to the label |

Running unit tests

Run nx test progress to execute the unit tests.