Progress Bar

A progress bar shows either determinate or indeterminate progress of an operation over time.

Import

import { AvProgressBarImports } from '@avesra/angular';

Usage

Loading60

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressBarImports,
} from '@avesra/angular';

@Component({
  selector: 'app-progress-bar-basic-demo',
  imports: [
    AvProgressBarImports,
    AvLabelComponent,
  ],
  template: `<div class="w-64" av-progress-bar [value]="60">
  <label av-label>Loading</label>
  <span av-progress-bar-output></span>
  <div av-progress-bar-track>
    <div av-progress-bar-fill></div>
  </div>
</div>`,
})
export class ProgressBarBasicDemo {}

Anatomy

Import the Progress Bar parts and compose them with attribute selectors on <div>, <span>, and <label> hosts. Project av-label, av-progress-bar-output, av-progress-bar-track, and av-progress-bar-fill inside div[av-progress-bar].

<div av-progress-bar [value]="60">
  <label av-label>Loading</label>
  <span av-progress-bar-output></span>
  <div av-progress-bar-track>
    <div av-progress-bar-fill></div>
  </div>
</div>

Sizes

Small40

Medium60

Large80

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressBarImports,
} from '@avesra/angular';
import type { AvProgressBarSize } from '@avesra/angular';

interface ProgressBarSizeDemo {
  size: AvProgressBarSize;
  label: string;
  value: number;
}

@Component({
  selector: 'app-progress-bar-sizes-demo',
  imports: [
    AvProgressBarImports,
    AvLabelComponent,
  ],
  template: `<div class="flex w-64 flex-col gap-6">
  @for (item of items; track item.size) {
    <div av-progress-bar [size]="item.size" [value]="item.value">
      <label av-label>{{ item.label }}</label>
      <span av-progress-bar-output></span>
      <div av-progress-bar-track>
        <div av-progress-bar-fill></div>
      </div>
    </div>
  }
</div>`,
})
export class ProgressBarSizesDemo {
  readonly items: ProgressBarSizeDemo[] = [
    { size: 'sm', label: 'Small', value: 40 },
    { size: 'md', label: 'Medium', value: 60 },
    { size: 'lg', label: 'Large', value: 80 },
  ];
}

Colors

Default50

Accent50

Success50

Warning50

Danger50

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressBarImports,
} from '@avesra/angular';
import type { AvProgressBarColor } from '@avesra/angular';

interface ProgressBarColorDemo {
  color: AvProgressBarColor;
  label: string;
}

@Component({
  selector: 'app-progress-bar-colors-demo',
  imports: [
    AvProgressBarImports,
    AvLabelComponent,
  ],
  template: `<div class="flex w-64 flex-col gap-6">
  @for (item of items; track item.color) {
    <div av-progress-bar [color]="item.color" [value]="50">
      <label av-label>{{ item.label }}</label>
      <span av-progress-bar-output></span>
      <div av-progress-bar-track>
        <div av-progress-bar-fill></div>
      </div>
    </div>
  }
</div>`,
})
export class ProgressBarColorsDemo {
  readonly items: ProgressBarColorDemo[] = [
    { color: 'default', label: 'Default' },
    { color: 'accent', label: 'Accent' },
    { color: 'success', label: 'Success' },
    { color: 'warning', label: 'Warning' },
    { color: 'danger', label: 'Danger' },
  ];
}

Without Label

When no visible label is needed, set aria-label on div[av-progress-bar] for accessibility.

import { Component } from '@angular/core';
import { AvProgressBarImports } from '@avesra/angular';

@Component({
  selector: 'app-progress-bar-without-label-demo',
  imports: [AvProgressBarImports],
  template: `<div class="w-64" av-progress-bar aria-label="Loading progress" [value]="45">
  <div av-progress-bar-track>
    <div av-progress-bar-fill></div>
  </div>
</div>`,
})
export class ProgressBarWithoutLabelDemo {}

Indeterminate

Use is-indeterminate when progress cannot be determined.

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressBarImports,
} from '@avesra/angular';

@Component({
  selector: 'app-progress-bar-indeterminate-demo',
  imports: [
    AvProgressBarImports,
    AvLabelComponent,
  ],
  template: `<div class="w-64" av-progress-bar is-indeterminate aria-label="Loading">
  <label av-label>Loading...</label>
  <div av-progress-bar-track>
    <div av-progress-bar-fill></div>
  </div>
</div>`,
})
export class ProgressBarIndeterminateDemo {}

Custom Value Scale

Use min, max, and format-options to customize the value range and display format.

Progress$750.00

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressBarImports,
} from '@avesra/angular';

@Component({
  selector: 'app-progress-bar-custom-value-demo',
  imports: [
    AvProgressBarImports,
    AvLabelComponent,
  ],
  template: `<div
  class="w-64"
  av-progress-bar
  [min]="0"
  [max]="1000"
  [value]="750"
  [format-options]="formatOptions"
>
  <label av-label>Progress</label>
  <span av-progress-bar-output></span>
  <div av-progress-bar-track>
    <div av-progress-bar-fill></div>
  </div>
</div>`,
})
export class ProgressBarCustomValueDemo {
  readonly formatOptions: Intl.NumberFormatOptions = {
    style: 'currency',
    currency: 'USD',
  };
}

Styling

Passing Tailwind CSS classes

Pass utility classes on individual Progress Bar parts — for example av-progress-bar-track and av-progress-bar-fill.

Loading60

import { Component } from '@angular/core';
import {
  AvLabelComponent,
  AvProgressBarImports,
} from '@avesra/angular';

@Component({
  selector: 'app-progress-bar-custom-styling-demo',
  imports: [
    AvProgressBarImports,
    AvLabelComponent,
  ],
  template: `<div class="w-64" av-progress-bar [value]="60">
  <label av-label>Loading</label>
  <span av-progress-bar-output></span>
  <div av-progress-bar-track class="!bg-purple-100 dark:!bg-purple-900">
    <div av-progress-bar-fill class="!bg-purple-500"></div>
  </div>
</div>`,
})
export class ProgressBarCustomStylingDemo {}

Customizing the component classes

To customize the Progress Bar classes, use the @layer components directive. Learn more.

@layer components {
  .av-progress-bar {
    @apply w-full gap-2;
  }

  .av-progress-bar__track {
    @apply h-3 rounded-full;
  }

  .av-progress-bar__fill {
    @apply rounded-full;
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Progress Bar component uses these CSS classes:

Base & Element Classes

.av-progress-bar — Base container (grid layout)
.av-progress-bar__output — Value text display
.av-progress-bar__track — Track background
.av-progress-bar__fill — Filled portion of the track

Size Classes

.av-progress-bar--sm — Small size variant (thinner track)
.av-progress-bar--md — Medium size variant (default)
.av-progress-bar--lg — Large size variant (thicker track)

Color Classes

.av-progress-bar--default — Default color variant
.av-progress-bar--accent — Accent color variant
.av-progress-bar--success — Success color variant
.av-progress-bar--warning — Warning color variant
.av-progress-bar--danger — Danger color variant

API

Props for div[av-progress-bar]. span[av-progress-bar-output], div[av-progress-bar-track], and div[av-progress-bar-fill] project content / render the bar and have no inputs. Compose with shared label[av-label] when a visible label is needed.

Prop	Type	Default	Description
`value`	`number`	`0`	The current value (div[av-progress-bar]).
`min`	`number`	`0`	The minimum value (div[av-progress-bar]).
`max`	`number`	`100`	The maximum value (div[av-progress-bar]).
`is-indeterminate`	`boolean`	`false`	Whether progress is indeterminate (div[av-progress-bar]).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the progress track (div[av-progress-bar]).
`color`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Color of the fill bar (div[av-progress-bar]).
`format-options`	`Intl.NumberFormatOptions`	—	Number format for the value display on av-progress-bar-output (div[av-progress-bar]).
`disabled`	`boolean`	`false`	Disables the progress bar (div[av-progress-bar]).
`aria-label`	`string`	—	Accessible label when no visible label is provided (div[av-progress-bar]).