Component

Progress

A determinate or indeterminate progress bar. Set a value against a max, colour and size it, choose the shape, show a label and a formatted value inside or outside the track, or template the value entirely.

Label & value

Digitising 30%

Cataloguing 72/120

Complete 100%

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbProgressImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-progress-basic',
  imports: [HbProgressImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4">
      <hb-progress [hbValue]="30" hbLabel="Digitising" hbShowValue />
      <hb-progress
        [hbValue]="72"
        [hbMax]="120"
        hbLabel="Cataloguing"
        hbShowValue
        hbFormat="fraction"
      />
      <hb-progress [hbValue]="100" hbLabel="Complete" hbShowValue hbType="success" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoProgressBasicComponent {}

Status, size & shape

Digitised 92%

In review 58%

Errors 14%

Storage 70

Inside value, template & indeterminate

64%

7/10

Photos 42 of 100 photos

Uploading photos

API reference

hb-progress — value

Property	Description	Type	Default
[hbValue] / [hbMax]	The current amount and the total it is measured against. The value is clamped to 0…max.	number	0 / 100
[hbIndeterminate]	Show an animated indeterminate bar instead of a fixed value.	boolean	false
[hbShowValue] / [hbFormat]	Display the value, formatted as a percentage, the raw value, or a value/max fraction.	boolean / 'percent' \| 'value' \| 'fraction'	false / 'percent'
[hbValuePosition]	Render the value in the top row above the track, or inside the filled bar.	'outside' \| 'inside'	'outside'
[hbLabel] / [hbAriaLabel]	A visible label above the track, and the accessible label for the progressbar.	string	'' / 'Progress'
ng-template[hbValueTemplate]	Fully custom value rendering. Context: $implicit = value, value, max, percent.	template	—

hb-progress — appearance

Property	Description	Type	Default
[hbType]	The colour of the bar.	'default' \| 'success' \| 'warning' \| 'destructive'	'default'
[hbSize]	Track height.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbShape]	Corner rounding of the track and bar.	'rounded' \| 'soft' \| 'square'	'rounded'
[hbBarClass]	Extra classes applied to the filled bar (e.g. a gradient).	ClassValue	''