Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Progress Component

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

## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), 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

### Labels Add labels to your progress bars by placing text within the `<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.

### 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.

### 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.

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

### 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.

### Thin Thin variant of progress

## Customizing ### CSS variables ```css --cui-progress-height: #{$progress-height}; --cui-progress-bg: #{$progress-bg}; --cui-progress-border-radius: #{$progress-border-radius}; --cui-progress-box-shadow: #{$progress-box-shadow}; --cui-progress-bar-color: #{$progress-bar-color}; --cui-progress-bar-bg: #{$progress-bar-bg}; --cui-progress-bar-transition: #{$progress-bar-transition}; ``` #### How to use CSS variables ```ts const vars = { '--my-css-var': 10, '--my-another-css-var': "red" } ``` ```html <c-progress [ngStyle]="vars" [value]="25" /> ``` ### SASS variables ```scss $progress-height: 1rem !default; $progress-font-size: $font-size-base * .75 !default; $progress-bg: var(--cui-secondary-bg) !default; $progress-border-radius: var(--cui-border-radius) !default; $progress-box-shadow: var(--cui-box-shadow-inset) !default; $progress-bar-color: $white !default; $progress-bar-bg: var(--cui-primary) !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; $progress-group-margin-bottom: $spacer !default; $progress-group-header-margin-bottom: $spacer * .25 !default; ``` --- ## API ### Import ```ts // standalone components import { ProgressComponent, ProgressBarComponent } from '@coreui/angular'; @Component({ standalone: true, imports: [ProgressComponent, ProgressBarComponent] // ... }) export class ... ``` ```typescript // ng modules import { ProgressModule } from '@coreui/angular'; @NgModule({ imports: [ProgressModule] // ... }) export class ... ``` --- ### c-progress _component_ #### Inputs

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

--- ### c-progress-bar - for backward compatibility #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `animated` | Use to animate the stripes right to left via CSS3 animations. | `boolean` | `false` | | `color` | Sets the color context of the component to one of CoreUI’s themed colors. | `string` | | | `role` | Set default html role attribute. | `string` | `'progressbar'` | | `value` | The percent to progress the ProgressBar. | `number` | `0` | | `variant` | Set the progress bar variant to optional striped. | ``"striped"`` | |