Radial Progress Bar

Type: Custom Component

DemoExample

UI Builder Inspector

Public Properties

Name	Type	Description
Instant	bool	If set to true, progress and indicator values will update instantly without animation.
UpdateFrequency	long	The frequency, in milliseconds, at which the progress bar updates. Lower values result in more frequent updates, making the animation smoother.
Step	float	The incremental step size used when animating progress or indicator values.
FirstDelay	long	The delay (in milliseconds) before starting the first stage of the progress bar animation.
SecondDelay	long	The delay (in milliseconds) before starting the second stage of the animation (used when updating both progress and indicator values).
CurrentValue	float	The current value of the progress bar.
TargetValue	float	The target value for the progress bar, clamped between 0 and 1. When set, the progress bar animates (or jumps) to this value.
TargetIndicator	float	The target value for the indicator, which tracks progress separately. Also clamped between 0 and 1 and behaves similarly to TargetValue.
Thickness	float	The value of radial bar's thickness.

Styling

Thickness: Can be changed directly from UI Builder or by assigning a value in code (type float).

Colors: Colors can be directly changed from the UI Builder or you can edit the assigned custom property for each color from a USS file. There are 4 color values in total.

• Background Color: Color of the unfilled area of the bar.

• Progress Color: Color of the filled area of the bar.

• Positive Indicator Color: Color of a positive value change area. The area is temporary.

• Negative Indicator Color: Color of a negative value change area. The area is temporary.

/* The radial progress bar automatically has this class */
/* Simply add the Radial Progress Bar component to a UXML file 
   and edit the USS class to change the color properties */
.radial-progress {
  --radial-progress-bg-color: var(--color-base-800);
  --radial-progress-progress-color: var(--color-primary-600);
  --radial-progress-indicator-positive-color: var(--color-lime-600);
  --radial-progress-indicator-negative-color: var(--color-red-600);
}

See Colors for a list of the default colors.