# Progress Bar
Progress Bar renders a compact linear indicator with semantic variants, three sizes, and determinate or indeterminate behavior. Pair it with nearby text so users understand what is progressing and what happens next.
## Import
```ts
import { ProgressBarComponent } from 'ui';
```
## Basic determinate progress
```ts
import { Component } from '@angular/core';
import { ProgressBarComponent } from 'ui';
@Component({
selector: 'app-progress-bar-basic-example',
standalone: true,
imports: [ProgressBarComponent],
template: `
Uploading contract.pdf64%
`,
})
export class ProgressBarBasicExampleComponent {}
```
## Determinate and indeterminate states
```ts
import { Component } from '@angular/core';
import { ProgressBarComponent } from 'ui';
@Component({
selector: 'app-progress-bar-states-example',
standalone: true,
imports: [ProgressBarComponent],
template: `
Processing invoice batchStep 2 of 4
Waiting for antivirus scanUnknown duration
`,
})
export class ProgressBarStatesExampleComponent {}
```
## Sizes and density
```ts
import { Component } from '@angular/core';
import { ProgressBarComponent } from 'ui';
@Component({
selector: 'app-progress-bar-sizes-example',
standalone: true,
imports: [ProgressBarComponent],
template: `
`,
})
export class ProgressBarUploadQueueExampleComponent {}
```
## Task flow with actions
```ts
import { Component, signal } from '@angular/core';
import { ButtonComponent, ProgressBarComponent } from 'ui';
@Component({
selector: 'app-progress-bar-task-flow-example',
standalone: true,
imports: [ButtonComponent, ProgressBarComponent],
template: `
Workspace migration
{{ statusText() }}
{{ currentStepLabel() }}
@for (step of steps; track step.label) {
{{ step.label }}
{{ step.value }}
}
Reset
Advance
Mark failed
`,
})
export class ProgressBarTaskFlowExampleComponent {
protected readonly state = signal<'queued' | 'running' | 'verifying' | 'done' | 'failed'>(
'queued',
);
protected readonly steps = [
{ label: 'Content', value: '124 files' },
{ label: 'Permissions', value: '18 groups' },
{ label: 'Verification', value: 'Pending' },
];
protected readonly statusText = () => {
switch (this.state()) {
case 'queued':
return 'Queued and waiting for a migration slot.';
case 'running':
return 'Files are moving to the new workspace.';
case 'verifying':
return 'Migration finished. Running permission and link checks.';
case 'done':
return 'Migration completed successfully.';
case 'failed':
return 'Migration stopped. Review logs before retrying.';
}
};
protected readonly currentStepLabel = () => {
switch (this.state()) {
case 'queued':
return 'Step 1 of 3';
case 'running':
return 'Step 2 of 3';
case 'verifying':
return 'Step 3 of 3';
case 'done':
return 'Completed';
case 'failed':
return 'Attention needed';
}
};
protected readonly currentType = () =>
this.state() === 'queued' ? 'indeterminate' : 'determinate';
protected readonly currentVariant = () => {
switch (this.state()) {
case 'done':
return 'success';
case 'failed':
return 'danger';
case 'verifying':
return 'info';
default:
return 'primary';
}
};
protected readonly currentValue = () => {
switch (this.state()) {
case 'queued':
return 0;
case 'running':
return 52;
case 'verifying':
return 88;
case 'done':
return 100;
case 'failed':
return 52;
}
};
protected readonly currentAriaValueText = () => {
switch (this.state()) {
case 'queued':
return 'Waiting to start';
case 'running':
return 'Step 2 of 3, 52 percent complete';
case 'verifying':
return 'Step 3 of 3, verification in progress';
case 'done':
return 'Migration completed';
case 'failed':
return 'Migration failed during transfer';
}
};
protected advance(): void {
switch (this.state()) {
case 'queued':
this.state.set('running');
break;
case 'running':
this.state.set('verifying');
break;
case 'verifying':
this.state.set('done');
break;
default:
break;
}
}
protected fail(): void {
this.state.set('failed');
}
protected reset(): void {
this.state.set('queued');
}
}
```
## Accessibility
### Role and value
`ProgressBarComponent` renders with `role="progressbar"`. In determinate mode it exposes `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`; in indeterminate mode those numeric value attributes are omitted.
| Mode | Accessibility behavior |
| --- | --- |
| determinate | exposes current value and range |
| indeterminate | omits numeric value attributes |
### Accessible name
Use `ariaLabel` to describe what is progressing, for example `Uploading contract.pdf` or `Storage usage`. The default label is only a generic fallback.
### Value text
Use `ariaValueText` when percent alone is not enough, such as `Step 2 of 4`, `3 files remaining`, or `Waiting for virus scan`.
| State | Attribute / guidance |
| --- | --- |
| current progress | `aria-valuenow` when determinate |
| min / max | `aria-valuemin` and `aria-valuemax` |
| richer wording | `aria-valuetext` or adjacent status text |