Progress Bar

The Progress Bar object is a highly versatile visual indicator used to display the completion status of a task or to represent a value within a specific range. It provides immediate, clear feedback to the user regarding ongoing processes within your Custom Game Launcher.

Progress Bars are essential for communicating wait times or background activity, ensuring the user knows the launcher is actively working and hasn't stalled.

Progress Bar Overview

This object consists of a background track and a filled foreground bar that expands horizontally as its value increases. You can customize the colours of both elements, control the display of the percentage text, and adjust the corner rounding to match your Custom Launcher's aesthetic perfectly.

Typical Uses

• Downloading game updates or patches
• Installing or verifying game files
• Loading screens or connecting to servers
• Displaying player stats (e.g., experience points, health)
• Visualizing volume or settings levels

Default Settings

When created, the Progress Bar starts halfway filled to give you an immediate sense of its appearance on the canvas.

Properties

The Progress Bar provides numerous settings to tailor its behaviour and appearance.

Values

• Current Value: The starting or current value of the bar. This is the number that dictates how much of the bar is filled.
• Maximum Value: The value at which the bar is considered 100% full. For example, if a download is 500MB, the Maximum Value would be 500.

Bar Colors

• Bar Color: The colour of the filled portion of the progress bar.
• Background Color: The colour of the empty track behind the filled portion.

Text & Typography

• Show Percentage Text: A toggle to display the automatically calculated percentage text centered over the bar.
• Text Color: The colour of the percentage text. Make sure this contrasts well with both the Bar Color and the Background Color.
• Font Settings: Adjust the Font Family, Size, Weight, Italic, and Underline properties to match your launcher's branding.

Border

• Border Radius (px): Controls how rounded the outer corners of the entire progress bar container are. Set to 0 for sharp, square corners, or a higher number for a pill-shape design.
• Border Thickness (px) & Color: Defines an optional stroke around the outside of the bar.

Progress Bar Events

Progress Bars can trigger actions automatically as their value changes, allowing you to build complex logic without writing code.

On Value Change

Fires continuously whenever the Current Value changes. This is useful if you need to update a secondary text label with the exact numbers (e.g., "450 / 500 MB") while the bar is moving.

On Full

Fires the exact moment the Current Value reaches the Maximum Value (100%). This is highly useful for triggering the next step in a sequence, such as hiding the progress bar and showing a "Play" button once a download completes.

On Empty

Fires when the progress returns to zero. This might occur if a download fails and resets, or if the bar is being used to track a depleting value.

Progress Bar Actions

The Progress Bar itself doesn't typically perform standalone actions; rather, it is the target of actions performed by other systems or objects within the Developer Edition.

Set Object Property from Variable

This is the most common way to control a Progress Bar. You use this action to push a value from a Global Variable directly into the Progress Bar's value or maxValue property. As the variable updates, the bar fills visually.

Show / Hide Objects

You will frequently use layout actions to reveal a Progress Bar when a task begins (like clicking an "Update" button) and hide it when the task finishes.

Building Logic with the Progress Bar

Progress Bars are designed to integrate seamlessly with the background processes of your Custom Game Launcher.

Wiring up a Download

When you trigger a file download, you want the user to see the progress:

1. Create a Progress Bar and a "Download" Button. Hide the Progress Bar initially.
2. On the Button's On Click event, add the Show Objects action to reveal the Progress Bar.
3. Next, add the Download File action to the Button. In the action parameters, specify your Progress Bar ID. The launcher will now automatically calculate and pipe the download progress directly into the bar.
4. On the Progress Bar's On Full event, add a Change Button Text action to change the download button's text to "Play", and perhaps a Hide Objects action to remove the bar.

Linking to the LaunchBoost Patcher

If you are utilizing the advanced LaunchBoost object to handle complex game updates, the integration is just as simple:

1. The LaunchBoost object allows you to define a varProgress variable. This variable automatically fills with the percentage (0-100) sent from the patcher.
2. Use the Set Object Property from Variable action to continuously push that varProgress value into the Progress Bar's value property.

Custom CSS Example

For users of Developer Edition, you can use Custom CSS to create animated, striped progress bars for a more dynamic and premium feel. This technique uses CSS gradients applied directly to the fill element.

 /* This adds animated stripes to the child fill element */
 .progress-bar-fill {
 background-image: linear-gradient(
 45deg,
 rgba(255, 255, 255, 0.15) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.15) 50%,
 rgba(255, 255, 255, 0.15) 75%,
 transparent 75%,
 transparent
 ) !important;
 background-size: 40px 40px !important;
 animation: glc-progress-stripes 2s linear infinite !important;
 box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2) !important;
 }
 @keyframes glc-progress-stripes {
 from { background-position: 40px 0; }
 to { background-position: 0 0; }
 }
 

This CSS trick gives the bar a sense of forward motion, which is excellent for indicating that a process is actively working even if the percentage number isn't ticking up quickly.

Summary

The Progress Bar is vital for providing visual feedback during time-consuming operations like downloading or patching. By utilizing the built-in events, dynamic actions, and Developer Edition styling options, you can create a seamless and professional experience within your Custom Game Launcher.