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.

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)

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
    }
  }
}