Progress Bar

import { AXProgressBarModule } from '@acorex/components/progress-bar';

Progress component visually represents the completion percentage of an ongoing operation, providing users with clear feedback on its status. It offers customization options such as different colors to indicate various stages or importance levels of the operation. This makes it a flexible and informative tool for tracking progress in applications.

Overview

In this section, you can test different options of this component and see the output in real time

Color

Primary

Height

Progress

Usage

A simple example of using ax-progress-bar

Preview

Code

Using Decorators

You can use decorators. For example, you can use ax-prefix, ax-suffix at the beginning and end of the progress bar to display text or anything else.

Preview

Code

Mode

By using mode, you can specify how to display and function progress-bar

Preview

Code

Custom height

A progress can take your desired number as height. Be careful that the measurement unit is pixels and you only have to give a number to the height property

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-progress-bar-bg-color	var(--ax-sys-color-primary-surface)	this variable specifies the background color of the progress bar component. It is used to define the visual backdrop against which the progress indicator is displayed, ensuring clarity and alignment with the design theme.