Examples

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

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 theoverflow: 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 aheight value on the<c-progress>, so if you change that value, the inner<c-progress-bar> will automatically resize accordingly.

Backgrounds

Usecolor 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

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

Striped

Addvariant="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. Addanimated property to<c-progress> to animate the stripes right to left via CSS3 animations.

Thin

Thin variant of progress

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

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

Inputs

c-progress-bar

• for backward compatibility

Inputs