Circular Progress

import { AXCircularProgressModule } from '@acorex/components/circular-progress';

Circular progress visually represents the percentage of an operation's progress within a circular format. It features customizable colors and stroke styles, providing a clear and dynamic way to indicate the status of ongoing tasks.

Overview

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

🔃

Color

Primary

Size

Stroke

Progress

Usage

A simple example of using ax-circular-progress

Preview

Code

Using content inside

Circular progress can display specific contents or percentages inside

Preview

Code

Customization

Circular progress has the ability to adjust the size and stroke along with the color

Preview

Code

Indeterminate

Make it spin!

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-circular-progress-circle-size	48px	Diameter of the circular progress indicator.
--ax-comp-circular-progress-stroke-size	44px	Diameter of the inner circle (background) creating the stroke effect. Should be smaller than `circle-size`.
--ax-comp-progress-circular-inside-bg-color	var(--ax-sys-color-lightest-surface(	Background color of the inner circle.
--ax-comp-circular-progress-animation-duration	1.5s	Duration of the animation (indeterminate state).
--ax-comp-progress-circular-color	rgba(var(--ax-sys-color-primary-surface))	Color of the progress arc. Uses the primary color.
--ax-comp-progress-circular-line-color	rgba(var(--ax-sys-color-primary-surface), 0.25)	Color of the background arc. Uses the primary color with 25% opacity.

Props

size	number	64	Specifies the size of the circular progress indicator.
color	AXStyleColorType	-\|ghost	Specifies the color of the circular progress indicator.
stroke	number	8	Determines the stroke width of the circular progress indicator.
progress	number	0	Specifies the progress value of the circular progress indicator.

Methods

ValueChange	number	Specifies the function to be called when the value of the circular progress indicator changes.
strokeChange	number	Specifies the function to be called when the stroke width of the circular progress indicator changes.
sizeChange	number	Specifies the function to be called when the size of the circular progress indicator changes.
colorChange	AXStyleColorType	Specifies the function to be called when the color of the circular progress indicator changes.
onOptionChanged	AXOptionChangedEvent	Specifies the function to be called when an option related to the circular progress indicator changes.