Luna UI Documentation

RadialLoading is a VisualElement that paints an indeterminate spinning arc on a circular track — useful for "working…" states where you don't have a known end. For a determinate radial progress bar, see Radial ProgressBar.

Radial Loading

Setup

html

<luna:RadialLoading ArcSize="0.2" LineWidth="10" UpdateFrequency="10" Step="0.05" />

The control auto-starts its animation on construction. Stop and restart explicitly via StopAnimation() / StartAnimation().

Inspector (UxmlAttributes)

Radial Loading Inspector

Attribute	Type	Description
`ArcSize`	float	Length of the spinning arc as a fraction of the full circle (0–1, default `0.2`). Tweens smoothly to new values.
`LineWidth`	float	Stroke width in pixels (default `10`).
`UpdateFrequency`	long	Frame interval in milliseconds (default `10`).
`Step`	float	How far the arc rotates per frame (default `0.05`).

CSS variables

Variable	Targets
`--radial-loading-track-color`	The full-circle track behind the arc.
`--radial-loading-line-color`	The spinning arc itself.

css

.my-spinner {
  --radial-loading-track-color: rgb(60, 60, 60);
  --radial-loading-line-color: rgb(255, 100, 100);
}

CSS classes

Class	Applied when
`radial-loading`	Always.

API

Properties

Property	Type	Description
`TrackColorOverride`	`Color?`	Forces a track color, bypassing USS variable. Set `null` to fall back to USS.
`ProgressColorOverride`	`Color?`	Forces an arc color, bypassing USS variable.

Methods

Method	Description
`StartAnimation()`	(Re)starts the rotation scheduler.
`StopAnimation()`	Pauses the rotation scheduler.