#Progress

Show how far a task has got with a horizontal bar that fills as the value grows.

#Installation

npx @blotch/dolan add progress

import { UiProgress } from '../components/ui/progress';

#Usage

import { Component, signal } from '@angular/core';
import { UiProgress } from '../components/ui/progress';

@Component({
  selector: 'app-upload',
  imports: [UiProgress],
  template: `<ui-progress [value]="uploaded()" />`,
})
export class Upload {
  protected readonly uploaded = signal(30);
}

• value runs from 0 to max, which is 100 by default. Values outside that range are clamped.
• When value changes, the fill animates to its new width. The first render doesn't animate.
• The bar fills its parent's width. Set a width class to change that.

#Custom max

<ui-progress [value]="150" [max]="200" />

#Indeterminate

Set indeterminate when you can't tell how far along the task is. A short fill slides across the track over and over, and value is ignored.

<ui-progress [indeterminate]="true" />

#API

#UiProgress

No outputs.

#Related

• Spinner: show loading when you can't measure progress
• Skeleton: hold the place of content that's loading