Progress Bars

A progress bar draws a fill you can drive with any value. There are four, and they all live under Add Widget → Primitives:

Widget	Use it when
Simple Progress Bar	You want a plain bar, fast. A track, a fill, two colours. Horizontal or vertical.
Horizontal Progress Bar	You want it to look like yours — image or video fills, gradients, a knob, a label that tracks the fill.
Vertical Progress Bar	The same, filling bottom to top, with the label beside the bar.
Circular Progress Bar	A ring, a gauge, a half circle — anything round.

They're the building block for any meter: a level bar, a custom gauge, or a progress indicator inside a Show / Hide container.

Tracking a goal instead?

If you want a bar tied to one of your Goals — with the goal's name, current/target labels, milestone ticks and a timer — use the Goal Bar instead. It's purpose-built for that, and saves you wiring anything up.

Driving the fill

Every bar takes a fill value, and the neat part is that many live values are already fractions you can wire straight in. A bar nested inside a Hype Train container can use `{{subtreeContext.hypeTrain.progress}}` as its value to show the current level's progress with no maths.

The Simple bar takes a fraction from 0 to 1 (or a percentage). The Horizontal, Vertical and Circular bars take a Fill % from 0 to 100, so a goal needs a quick multiply:

• Fill % → `$(math '{{goal.goals.0.progress}} * 100')`
• Text → `{{goal.goals.0.current}} / {{goal.goals.0.target}}`

Simple Progress Bar

A track box and a fill, and that's the point. Set the fill value, the fill and track colours, a corner radius, and whether it runs horizontally or vertically.

Horizontal and Vertical Progress Bars

The same bar on two axes, with everything the Simple bar leaves out:

• Background and Foreground layers — each one a colour, a gradient, or an image/video (with tiling, scale and a nine-point anchor). The background is the empty track; the foreground is the part that fills.
• Fill behaviour — the foreground either grows with the fill, or stays put and is revealed by it. Revealing is what you want for an image fill, so the picture doesn't stretch.
• Reverse — horizontal bars fill left to right and vertical bars fill bottom to top. Turn reverse on to flip either.
• A knob — an image or video that rides the fill's leading edge. Give the bar a margin on that side and the knob can hang outside the bar.
• A label — full typography (font, size, weight, colour or gradient, outline, shadow), and you choose where it sits.
• Border, corner radius and margins.

Placing the label

The label has two independent controls.

Side puts it across the bar:

• Inside bar — over the fill itself. The default for horizontal bars.
• Above / Below bar (horizontal), Left / Right of bar (vertical) — in the margin on that side, so it's never cramped. The default for vertical bars, since a narrow vertical bar has no room for text on it.

Give an outside label room

An outside label is drawn into the margin on its side. If that margin is 0 the label has nowhere to go and will hang outside the widget. The Vertical bar ships with a right-hand margin already set for this reason — if you move the label to the left, give it a left margin to match.

Position puts it along the bar:

• Start of bar / Center / End of bar — a fixed spot.
• Inside fill / Outside fill — just behind or just ahead of the fill's leading edge, so it travels with it. It automatically locks to a side when the bar gets too full or too empty for it to fit.
• Centered on fill — sits level with the fill's leading edge. Pair it with a left/right side on a vertical bar and you get a thermometer: the number rides up and down next to the mercury.

Start and End follow the fill's direction, so they still mean what they say when reverse is on.

Circular Progress Bar

The same idea wrapped around an arc, with the same Background/Foreground layers, knob and label. Three controls decide the shape:

• Start angle — where the bar begins. 0° is 12 o'clock. Rotate it anywhere.
• Total angle — how much of the circle it covers. 360° is a full ring, 180° a half circle, 270° the classic gauge.
• Direction — clockwise or counter-clockwise.

So a speedometer is a 270° bar starting at 135°, and a ring is 360° starting at 0°.

An arc has ends rather than corners, so instead of a corner radius you pick the ends: flat or round. Thickness sets how heavy the ring is, and padding insets it from the edge. The border traces the whole arc — outer edge, inner edge and around the ends.

The bar is drawn as a circle inside the widget's frame, so keep the frame square unless you're making a half circle or a gauge, where a wider, shorter frame suits better.

Gradients that follow the ring

Want the bar to run red → orange → green as it fills? Set the foreground gradient's type to conic and the colours run around the arc instead of across the widget. It's fitted to the arc for you: the first colour lands where the bar starts and the last where it ends, whichever direction you've set and however much of the circle you're using.

The Circular bar's fill is a conic gradient already, so if you just edit the colours you'll get this for free. The other gradient types still do what they say — a linear gradient sweeps straight across the widget, which reads as a sheen over the ring rather than a progression along it.

By default the arc shows whatever slice of the gradient it has reached — at 50% you see the first half of the colours. Turn on Squeeze conic gradient into the fill and the whole gradient is compressed into the filled part instead, so every colour reads at any percentage.

Placing the label

• Center of ring — in the middle. The obvious home for a percentage.
• Follow fill — rides the arc's leading tip.