Luna UI Documentation

Progress Bars

Luna provides a powerful progress bar system with smooth animations, multi-segment support, and indicator overlays.

Available Components

Component	Description
Progress Bar	Traditional horizontal/vertical bar with fill segments, overlay images, and icon support.
Radial Progress Bar	Circular progress indicator with arc rendering. Supports multi-segment displays (Overwatch-style).

Key Features

Animated Transitions — Smooth value changes with configurable delays and step sizes
Indicator Bar — Shows previous value during changes (damage preview, heal preview)
Multi-Segment — Stack multiple progress fills with different colors
USS Styling — Full customization via USS properties and color classes

Quick Start

xml

<Luna.ProgressBar name="health-bar" />

csharp

var healthBar = root.Q<ProgressBar>("health-bar");

// Initialize
healthBar.InstantPositive = true;
healthBar.Progress[0].TargetValue = 1f;
healthBar.Indicator.TargetValue = 1f;
healthBar.PlayProgress();
healthBar.PlayIndicator();
healthBar.InstantPositive = false;

// Update value
healthBar.Progress[0].TargetValue = 0.5f;
healthBar.Indicator.TargetValue = 0.5f;
healthBar.UpdateProgressSegments();
healthBar.PlayProgress();
healthBar.PlayIndicator();

Architecture

For advanced customization and creating custom progress bar types, see the Architecture documentation.