Fluent Commerce Logo
Docs
Sign In

Circular Progress Component

UI Component

Changed on:

30 Sept 2024

Overview

The Circular Progress Component visually indicates the ongoing progress of a loading .

No alt text provided
Plugin NameCore

The standard library of components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.progress.circular

Detailed technical description

The component is used to indicate the ongoing progress of a loading . The `fc.progress.circular` component itself doesn't have the logic to determine when the loading is complete. In the , there’s a condition component  (`fc.conditional`) that `fc.progress.circular` visibility based on specified conditions. 

Properties

Name

Type

Required

Default

Description

size

`number`

No

none

Sets the size of the circle. If a number is used, it assumes pixels.

color

`‘primary’| ‘secondary’`

No

`‘primary’`

Defines the color of the component, aligning with the project theme colors.

value

`number`

No

none

Represents the progress value for the determinate variant, ranging from 0 to 100.

variant

`'determinate' | 'indeterminate' | 'static'`

No

`'indeterminate'`

Specifies the variant to use. Select `'indeterminate'` when there is no specific progress value available.

 

Configuration example

1{
2  "component": "fc.progress.circular",
3  "props": {
4    "size": 25,
5    "color": "secondary",
6    "variant": "determinate",
7    "value": 55
8  }
9}

Version History

2024-10-08

v24.10.8

Initial release

Recommended Placement

This component can be placed within any other component that supports child elements.