ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/circular-progressbar.md

id	title
circular-progress-bar	Circular Progressbar

The Circular Progress bar component can be used to show progress in a progress circle.

Properties

<div style={{ width:"100px"}}> Properties	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
Label	The label value shown inside the circle.	Select Auto to show the progress bar value, or select Custom to customize it.
Allow negative progress	Enabling this allows negative progress, making the circle move anticlockwise.	Enable or disable the toggle, or dynamically configure the value by clicking on fx and entering a logical expression.
Progress	Sets the progress of the component.	Progress value

:::info Any property having fx button next to its field can be programmatically configured. :::

Component Specific Actions (CSA)

The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.

<div style={{ width:"100px"}}> Action	<div style={{ width:"135px"}}> Description	<div style={{width: "200px"}}> How To Access
setValue()	Sets the value of the circular progress bar.	components.circularprogressbar1.setValue
setVisibility()	Sets the visibility of the component.	components.circularprogressbar1.setVisibility
setLoading()	Sets the loading state of the component.	components.circularprogressbar1.setLoading

Exposed Variables

Variable	Description	How To Access
value	Holds the value of the component	{{components.circularprogressbar1.value}}
isLoading	Indicates if the component is loading.	{{components.circularprogressbar1.isLoading}}
isVisible	Indicates if the component is visible.	{{components.circularprogressbar1.isVisible}}

Additional Actions

<div style={{ width:"100px"}}> Action	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Loading state	Enables a loading spinner, often used with the isLoading property to indicate progress.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Visibility	Controls component visibility.	Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Tooltip	Provides additional information on hover. Set a display string.	String

Devices

<div style={{ width:"100px"}}> Property	<div style={{ width:"100px"}}> Description	<div style={{ width:"100px"}}> Expected Value
Show on desktop	Makes the component visible in desktop view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile	Makes the component visible in mobile view.	You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Label

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Color	Sets the text color of the label.	Select the color or click on fx and input code that programmatically returns a Hex color code.
Size	Sets the text size of the label.	Enter the value or use the slider.

Progress Circle

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Track	Sets the base track color of the progress circle.	Select a color or click on fx and input code that programmatically returns a hex color code.
Positive	Sets the color of the progress for positive values.	Select a color or click on fx and input code that programmatically returns a hex color code.
Negative	Sets the color of the progress for negative values.	Select a color or click on fx and input code that programmatically returns a hex color code.
Completion	Sets the color of the completed portion of the progress circle.	Select a color or click on fx and input code that programmatically returns a hex color code.
Progress bar width	Determines the thickness of the progress circle.	Enter a value or use the slider.
Circle ratio	Determines how much of the circle is visible (partial/full circle).	Enter a value or use the slider.
Alignment	Sets the horizontal alignment of the component.	Choose from left, center, or right.
Counter clockwise rotation	Determines the direction in which the progress moves.	Enable or disable the toggle, or dynamically configure the value by clicking on fx and entering a logical expression.

Container

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> Configuration Options
Box shadow	Sets the box shadow properties of the component.	Select the box shadow color and adjust the related properties or set it programmatically using fx.
Padding	Allows you to maintain a standard padding by enabling the Default option.	Choose from Default or None.