Luna UI Documentation

Progress Bar Attributes

Progress Bar Attributes 2

Attributes

Attribute	Description
Progress Settings
Instant Positive	If value increased Progress and Indicator changes will be shown instantly.
Instant Negative	If value negative Progress and Indicator changes will be shown instantly.
Update Frequency	interval in ms
Step	How much length progress bar moves per update.
First Delay	Delay before the first bar starts to move. First bar can be main bar or indicator bar, depending on the change. If change is negative, main bar moves first followed by indicator bar. If change in positive, indicator bar moves first followed by main bar.
Second Delay	Delay before the second bar starts to move. First bar can be main bar or indicator bar, depending on the change. If change is negative, main bar moves first followed by indicator bar. If change in positive, indicator bar moves first followed by main bar.
Progress	Multiple progress fills.
Indicator	Indicator fill, hidden under the progress fills.
Color Settings
Color Background	Background color.
Color Indicator Positive	Color of the indicator bar when the change is positive.
Color Indicator Negative	Color of the indicator bar when the change is negative.
Other Settings
Title	Text to display on the bar.
Show Icon	Show icon on left of the ProgressBar.
Icon Size	Width and height of the icon.
Icon Tint	Image tint for the icon.
Vertical Line	Make progress bar vertical instead of horizontal.
Overlay Settings
Overlay Image	Image to use for overlay. Use SVG if you need masking.
Overlay Image Width	Width of the overlay image. Determines how many times it is repeated.
Gap Line Settings
Gap Line Count	Number of cells. Gap lines drawn = count - 1.
Minor Cells Per Major	Number of minor cells per major segment. Major lines are drawn between major segments.
Minor Gap Line Width	Width of minor gap lines in pixels.
Minor Gap Line Color	Color of minor gap lines.
Minor Gap Line Range	Vertical range of minor gap lines (0-1, where 1 is full height).
Minor Gap Line Min Spacing	Auto-skips minor lines when cells get too narrow.
Major Gap Line Width	Width of major gap lines in pixels.
Major Gap Line Color	Color of major gap lines.
Major Gap Line Range	Vertical range of major gap lines (0-1, where 1 is full height).

Progress Attributes

Attribute	Description
CurrentValue	Clamp between 0-1. Current fill value. You don't wanna edit this directly.
TargetValue	Clamp between 0 and 1. This is the target fill value. Modify this to change the fill level, but simply editing it is not enough—you must also trigger an update. See the example below.
Color	Color of the progress bar.

Custom USS Property

You can customize the appearance by overriding these USS properties in your stylesheet.

For quick styling, you can also use predefined color schemes by adding color classes. For example, adding the primary USS class will apply the default primary color settings.

Refer to colors to learn about available options.

Property	Description
--progress-bar-bg-color	Sets the background color of the progress bar.
--progress-bar-indicator-positive-color	Defines the color of the indicator bar when displaying an increase in value.
--progress-bar-indicator-negative-color	Specifies the color of the indicator bar when displaying a decrease in value.
--progress-bar-progress-color-0	Controls the color of individual progress bars. You can define up to 10 different progress colors (0-9) for multi-segment progress bars.

Public Methods

RebuildProgressSegments

Must be called if you change Length of Progress array. Creates or removes progress bars.

csharp

public void RebuildProgressSegments()

UpdateProgressSegments

Call this to apply the new TargetValue changes made to elements in the Progress array.

csharp

public void UpdateProgressSegments()

PlayProgress

Call to visually apply the values of Progress array.

csharp

public void PlayProgress()

PlayIndicator

Call to visually apply the value of Indicator.

csharp

public void PlayIndicator()

SetIndicatorStyle

This is handled automatically. But if you want, you can change the style of indicator fill manually.

csharp

public void SetIndicatorStyle(bool positive)

SetFilling

There must be only one element in Progress array.

Useful for when you wanna highlight a change.

csharp

public void SetFilling(float current, float add, float max)

// Example:
// Suppose you have an Experience Bar and want to highlight gained EXP.
// You can call it as shown below to display both the current and gained values simultaneously.
experienceBar.SetFilling(currentExp, add, expRequiredForNextLevel);

SetOverlayRepeatAmount

The repeat amount of overlay image is controlled by OverlayImageWidth.

This function calculates and sets OverlayRepeatAmount based on the given repeatAmount and contentRect.width of the ProgressBar.

Warning: contentRect.width is not calculated during the initial frames. This function will only work after the first few frames.

csharp

public void SetOverlayRepeatAmount(int repeatAmount)

SetGapLineCountWithScaling

Helper method that scales indicator and segment positions proportionally when gap count changes. Use this for dynamic max value scenarios (e.g., health bars where max HP changes).

When the maximum value changes (like max HP increasing from equipment), calling this method with the new gap count will automatically recalculate and reposition all segments and indicators proportionally.

csharp

public void SetGapLineCountWithScaling(int newGapLineCount)

Gap Line Overlays

Gap lines are VisualElements positioned on top of progress fills, providing a cell-like appearance without the complexity of mesh-based rendering. This replaces the need for CelledProgressBar in most use cases.

Features

Major and Minor Lines: Support for both major segment dividers and minor cell lines
Auto-skip: Minor lines automatically hide when cells become too narrow
Dynamic Scaling: Works with SetGapLineCountWithScaling() for changing max values

Example: League of Legends Style Health Bar

League of Legends Style Health Bar

csharp

// Configure gap lines for a health bar where each cell represents 100 HP
private void SetupHealthBar(float maxHealth)
{
    int cellCount = Mathf.CeilToInt(maxHealth / 100f);
    _progressBar.GapLineCount = cellCount;
    _progressBar.MinorGapLineWidth = 2;
    _progressBar.MinorGapLineColor = new Color(0, 0, 0, 0.5f);
    _progressBar.MinorGapLineRange = 1f; // Full height
    
    // Major lines every 1000 HP
    _progressBar.MinorCellsPerMajor = 10;
    _progressBar.MajorGapLineWidth = 4;
    _progressBar.MajorGapLineColor = Color.black;
}

// When max HP changes (e.g., from leveling up)
private void OnMaxHealthChanged(float newMaxHealth)
{
    int newCellCount = Mathf.CeilToInt(newMaxHealth / 100f);
    _progressBar.SetGapLineCountWithScaling(newCellCount);
}

Example

csharp

using UnityEngine;
using UnityEngine.UIElements;

namespace CupkekGames.Luna.Demo.Components
{
  public class ProgressBarDemo : MonoBehaviour
  {
    private UIDocument _uiDocument;
    private ProgressBar _progressBar;
    private Button _buttonDamage;
    private Button _buttonHeal;

    private void Awake()
    {
      _uiDocument = GetComponent<UIDocument>();

      _progressBar = _uiDocument.rootVisualElement.Q<ProgressBar>();

      _buttonDamage = _uiDocument.rootVisualElement.Q<Button>("Damage");
      _buttonHeal = _uiDocument.rootVisualElement.Q<Button>("Heal");
    }

    private void Start()
    {
      // Set instant to true to avoid animation at start
      _progressBar.InstantPositive = true;
      _progressBar.InstantNegative = true;

      _progressBar.Indicator.TargetValue = 1;
      _progressBar.PlayIndicator(); // You must call PlayIndicator to visually apply the value

      _progressBar.Progress[0].TargetValue = 1f;
      // Must be called after modifying the size of the Progress array. Not needed here, included for documentation purposes.
      _progressBar.RebuildProgressSegments(); 
      _progressBar.PlayProgress();  // You must call PlayIndicator to visually apply the value

      // Set instant back to false to play animation
      _progressBar.InstantPositive = false;
      _progressBar.InstantNegative = false;
    }

    private void OnEnable()
    {
      _buttonDamage.clicked += Damage;
      _buttonHeal.clicked += Heal;
    }

    private void OnDisable()
    {
      _buttonDamage.clicked -= Damage;
      _buttonHeal.clicked -= Heal;
    }

    private void Damage()
    {
      _progressBar.Progress[0].TargetValue -= 0.1f;
      _progressBar.Indicator.TargetValue = _progressBar.Progress[0].TargetValue;

      UpdateProgressBar();
    }

    private void Heal()
    {
      _progressBar.Progress[0].TargetValue += 0.1f;
      _progressBar.Indicator.TargetValue = _progressBar.Progress[0].TargetValue;

      UpdateProgressBar();
    }

    private void UpdateProgressBar()
    {
      // After updating, do NOT call RebuildProgressSegments. Instead, call UpdateProgressSegments.
      _progressBar.UpdateProgressSegments(); 
      _progressBar.PlayProgress(); // Visually apply the value of progress bars

      _progressBar.PlayIndicator(); // Visually apply the value of the indicator bar
    }
  }
}