Angular Progress Component

Progress

Documentation and examples for using Angular progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Available in Other JavaScript Frameworks

CoreUI Angular Progress Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Examples

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

New markup in CoreUI v5

We’ve simplified the HTML structure for progress bars to improve accessibility while still maintaining backward compatibility with the previous structure.

Basic usage

import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-example',
  templateUrl: './progress-example.component.html',
  imports: [ProgressComponent]
})
export class ProgressExampleComponent {}

<c-progress [value]="0" />
<c-progress [value]="25" />
<c-progress [value]="50" />
<c-progress [value]="75" />
<c-progress [value]="100" />

Labels

Add labels to your progress bars by placing text within the <c-progress>.

import { Component } from '@angular/core';
import { ProgressBarComponent, ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-labels',
  templateUrl: './progress-labels.component.html',
  imports: [ProgressComponent, ProgressBarComponent]
})
export class ProgressLabelsComponent {}

<c-progress [value]="25">25%</c-progress>
<c-progress>
  <c-progress-bar [value]="10" class="overflow-visible text-dark px-2" color="success">
    Long label text for the progress bar, set it to a dark color...
  </c-progress-bar>
</c-progress>

Please take note that the default setting for the <c-progress> content is to be limited by the overflow: hidden property. This is done to prevent the content from extending beyond the progress bar’s boundaries. However, if the progress bar is shorter than its label, the content may be truncated and become difficult to read. To modify this behavior, you can use the .overflow-visible class from the overflow utilities. Just make sure to specify a specific text color to ensure readability. Do keep in mind that this approach does not consider color modes at the moment.

Height

We only set a height value on the <c-progress>, so if you change that value, the inner <c-progress-bar> will automatically resize accordingly.

import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-height',
  templateUrl: './progress-height.component.html',
  imports: [ProgressComponent]
})
export class ProgressHeightComponent {}

<c-progress [height]="1" [value]="25" />
<c-progress [height]="5" [value]="25" />
<c-progress [height]="10" [value]="25" />
<c-progress [height]="15" [value]="25" />
<c-progress [height]="20" [value]="25" />

Backgrounds

Use color prop to change the appearance of individual progress bars.

It is important to choose an appropriate text color when incorporating labels into progress bars with a custom background color. This ensures readability and adequate contrast for the labels.

import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-backgrounds',
  templateUrl: './progress-backgrounds.component.html',
  imports: [ProgressComponent]
})
export class ProgressBackgroundsComponent {}

<c-progress [value]="25" color="success">25%</c-progress>
<c-progress [value]="50" color="info" />
<c-progress [value]="75" color="warning">
  <span class="text-dark px-2">75%</span>
</c-progress>
<c-progress [value]="100" color="danger" />

Multiple bars

New markup in CoreUI v5

We added a new stacked component to group multiple progress bars into a single stacked progress bar.

Include multiple progress bars in a <c-progress-stacked> component to create a single stacked progress bar.

import { Component } from '@angular/core';
import { ProgressComponent, ProgressStackedComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-multiple-bars',
  templateUrl: './progress-multiple-bars.component.html',
  imports: [ProgressComponent, ProgressStackedComponent]
})
export class ProgressMultipleBarsComponent {}

<c-progress-stacked>
  <c-progress [value]="15" />
  <c-progress [value]="30" color="success" />
  <c-progress [value]="20" color="info" />
</c-progress-stacked>

Striped

Add variant="striped" to any <c-progress> to apply a stripe via CSS gradient over the progress bar’s background color.

import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-striped',
  templateUrl: './progress-striped.component.html',
  imports: [ProgressComponent]
})
export class ProgressStripedComponent {}

<c-progress [value]="25" color="success" variant="striped" />
<c-progress [value]="50" color="info" variant="striped" />
<c-progress [value]="75" color="warning" variant="striped" />
<c-progress [value]="100" color="danger" variant="striped" />

Animated stripes

The striped gradient can also be animated. Add animated property to <c-progress> to animate the stripes right to left via CSS3 animations.

import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-animated-stripes',
  templateUrl: './progress-animated-stripes.component.html',
  imports: [ProgressComponent]
})
export class ProgressAnimatedStripesComponent {}

<c-progress [animated]="true" [value]="25" color="success" variant="striped" />
<c-progress [animated]="true" [value]="50" color="info" variant="striped" />
<c-progress [animated]="true" [value]="75" color="warning" variant="striped" />
<c-progress [animated]="true" [value]="100" color="danger" variant="striped" />

Thin

Thin variant of progress

import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-thin',
  templateUrl: './progress-thin.component.html',
  imports: [ProgressComponent]
})
export class ProgressThinComponent {}

<c-progress [value]="25" color="primary" thin />
<c-progress [value]="25" color="secondary" thin />
<c-progress [value]="25" color="success" thin />
<c-progress [value]="25" color="danger" thin />
<c-progress [value]="25" color="warning" thin />
<c-progress [value]="25" color="info" thin />

Styling

Learn how to customize the Angular Progress component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.

CSS variables

Angular Progress supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

How to use CSS variables

import { NgStyle } from '@angular/common';
import { Component } from '@angular/core';
import { ProgressComponent } from '@coreui/angular';

@Component({
  selector: 'docs-progress-css',
  imports: [NgStyle, ProgressComponent],
  templateUrl: './progress-css.component.html'
})
export class ProgressCssComponent {}

@let vars = {
  '--cui-progress-bg': 'var(--cui-success-bg-subtle)',
  '--cui-progress-bar-bg': 'mediumseagreen'
};

<c-progress [ngStyle]="vars" [value]="42" />

SASS variables

Accessibility

The Angular Progress component is built with accessibility in mind. Each progressbar includes the following ARIA attributes:

role: progressbar
aria-valuemin: Minimum value
aria-valuemax: Maximum value
aria-valuenow: Current value

API reference

Progress Module

Progress Standalone

c-progress

component

jsx

import { ProgressComponent } from '@coreui/angular'

Property	Default	Type
animated	`undefined`	`boolean`
Use to animate the stripes right to left via CSS3 animations.
color	-	`string`
Sets the color context of the component to one of CoreUI’s themed colors.
height	`0`	`number`
Sets the height of the component. If you set that value the inner `<c-progress-bar>` will automatically resize accordingly.
max	`100`	`number`
The max value of the ProgressBar.
role	`'progressbar'`	`string`
Set default html role attribute.
thin	`false`	`boolean`
Displays thin progress.
value	`0`	`number`
The percent value the ProgressBar.
variant	`undefined`	`'striped'`
Set the progress bar variant to optional striped.
white	`false`	`boolean`
Change the default color to white.

c-progress-bar

for backward compatibility

jsx

import { ProgressBarDirective } from '@coreui/angular'

Property	Default	Type
animated	`undefined`	`boolean`
Use to animate the stripes right to left via CSS3 animations.
color	-	`string`
Sets the color context of the component to one of CoreUI’s themed colors.
max	`100`	`number`
The max value of the ProgressBar.
precision	`0`	`number`
Number of decimal places to round the computed percent value to.
role	`'progressbar'`	`string`
Set default html role attribute.
value	`0`	`number`
The percent value the ProgressBar.
variant	`undefined`	`'striped'`
Set the progress bar variant to optional striped.