Circular Progress Component

Docs

Search

Help & Feedback

Sign In

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

UI Component

Changed on:

30 Sept 2024

Overview

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

Plugin Name	Core

The standard library of mystique 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 process. The

`fc.progress.circular`

component itself doesn't have the logic to determine when the loading process is complete. In the manifest, there’s a condition component (

`fc.conditional`

) that controls

`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}

Language: json

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.

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.