Radial Loading

Type: Custom Component

DemoExample

UI Builder Inspector

Public Properties

Name	Type	Description
Arc Size	float	The value of how much the filled area covers the loading bar.
LineWidth	float	The value of the bar's thickness.
Step	float	The incremental step size used when animating progress or indicator values.
UpdateFrequency	long	The frequency, in milliseconds, at which the progress bar updates. Lower values result in more frequent updates, making the animation smoother.

Styling

LineWidth: 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 2 color values in total.

• Track Color: Color of the background area.

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

/* The radial loading component automatically has this class */
/* Simply add the component to a UXML file and edit the USS class
   to change the color properties */
.radial-loading {
    --radial-loading-track-color: #fff;
    --radial-loading-line-color: var(--color-primary-800);
}

See Colors for a list of the default colors.