Circular Progress Component

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.