Goal Bar
The Goal Bar primitive is a progress bar wired to one of your Goals. It fills as your goal progresses and updates live as contributions come in. Add it from Add Widget → Primitives → Goal Bar.
Unlike the plain Progress Bar, the Goal Bar knows about your goals — it reads the current and target amounts, milestone markers and the countdown timer straight from the goal.
Choosing which goal to track
You can run several goals at once, so the Goal Bar lets you choose which one it shows:
- First active — whichever goal is currently active (the simplest choice).
- First of a type — the first goal of a chosen kind (e.g. a subscriber goal).
- A specific goal — pick one goal by id.
There's also a show when idle option that controls whether the bar disappears when there's no matching goal, or stays visible empty.
Appearance
The Goal Bar is highly styleable. You can set:
- Fill and background — a solid colour, a gradient, or an image fill.
- Corner radius, border and a fill animation (grow or reveal).
- Name — show the goal's name, with its own position, size and colour.
- Label — show the progress as
current / target, a percentage, or your own custom text, positioned above or on the bar. - Milestones — show milestone ticks along the bar, with separate colours for reached and unreached markers.
- Timer — show the remaining time for a time-limited goal.
Live touches
- Contribution flash — the bar briefly highlights when its goal's total goes up, so a new sub or donation is noticeable.
- Completion — when the goal completes it switches to a "complete" colour and holds on screen for a few seconds to celebrate before tidying away.
While you're designing in the Overlay Editor, the Goal Bar shows sample data so you can style it. Live, it shows your real goal.
See also
- Goals — create and manage the goals this widget tracks.
- Progress Bar — a plain bar for non-goal values.