ProgressBar

<ProgressBar> is a linear progress indicator with a title and percentage. Used for uploads, multi-step flows, and KPI completion.

`<ProgressBar>`

A simple linear progress indicator with a title on the left and a percentage on the right.

Basic Usage

<ProgressBar @title="Upload progress" @percent={{this.uploadPercent}} />

Arguments

Argument	Type	Description
`@title`	string	Label rendered above the bar (left-aligned)
`@percent`	number	Progress percentage 0–100

The width of the inner bar is bound to @percent and updates with a 500ms transition.

Real-World Examples

{{!-- File upload --}}
{{#if this.isUploading}}
  <ProgressBar @title="Uploading {{this.file.name}}" @percent={{this.file.percent}} />
{{/if}}

{{!-- Multi-step wizard --}}
<ProgressBar @title="Onboarding" @percent={{div (mul this.step 100) this.totalSteps}} />

{{!-- Goal completion KPI --}}
<ProgressBar @title="Monthly target" @percent={{this.metrics.completion_pct}} />

Source

File	Description
`addon/components/progress-bar.hbs`	Template
`addon/components/progress-bar.js`	Class