Progress Bar Figma: progress bar & labels

Updated: 2026-06-26

Audited: 2026-06-26

Value bar with label/limit rows — Structural Specification

Figma node: 4537:14830 (progress bar & labels) · Section: components ftdt (4543:5876) · file key: psH738AqHDxuMyFm897f9r

Primitive tier — domain-free. Used in FTDT Cumulative Limitations (5× per screen) and once per Duty Period Card (Max Duty Period row). The fill gradient (blue → red) is activated when the pilot is at or near the regulatory limit. Figma annotation: "gradient style for all progress bar fills".

Design tokens sourced from Figma file key psH738AqHDxuMyFm897f9r · Component: progress bar & labels (4537:14830) in components ftdt section · captured 2026-06-26

Live CSS Preview

Default — partial fill

1000hrs in 365days 0:29

At-Limit — gradient fill

672hrs in 672hrs 672

Near-Limit — deep fill

100hrs in 168hrs 0:29

Design Tokens

Dimensions

Master width

345 px

Master height

78 px

Track height

5 px

Track border-radius

10 px (rounded-full)

Fill border-radius

10 px (matches track)

Label row gap

8 px above track

Footer row gap

4 px below track

Container padding (screen)

16 px horizontal (--xsmall)

Colors

Track — Surface/Subtle

#dfedf9

Fill — interactive/blue-lt

#007bc2

Fill at-limit — gradient

#007bc2 → #c02126

Label / value text

text/primary #05273e

Typography — Label Row

Font family

Afacad SemiBold

Font weight

600

Font size

18 px (--font-size/body/m)

Line height

1.2

Typography — Footer Row

Font family

Futura PT Heavy

Font weight

Heavy / 800

Font size

16 px

Line height

1.2

Variants

State	Fill style	When used
Default	Solid `interactive/blue-lt` (#007bc2); width = Percentage × track width	Normal operating range
At-Limit	Linear gradient `#007bc2 → #c02126` (left to right); width = 100%	Pilot at or past regulatory limit — Figma annotation confirms gradient applies to all bars at limit

Layer Tree

└── progress bar & labels · 345×78 · FRAME
    ├── row · FRAME · flex row space-between
    │    ├── [LimitLabel] · TEXT · Afacad SemiBold 18px
    │    └── [CurrentValue] · TEXT · Afacad SemiBold 18px
    ├── progress bar · FRAME · 5px h · Surface/Subtle bg · radius 10px
    │    └── progress · FRAME · flex-1 · blue fill or gradient
    └── flight 01 · FRAME
        └── airport · FRAME · flex row space-between
            ├── [Percentage] · TEXT · Futura PT Heavy 16px
            └── [LimitValue] · TEXT · Futura PT Heavy 16px

ViewModel

Tier: primitive. Extends ComponentViewModel. VM holds data only — fill appearance is determined by CSS/renderer from Percentage and IsAtLimit.

└── ProgressBarViewModel : ComponentViewModel
    ├── Label : string — limit descriptor (e.g. "1000hrs in 365days")
    ├── CurrentValue : string — right-aligned current value (e.g. "0:29")
    ├── Percentage : double — 0.0 to 1.0; drives fill width
    ├── IsAtLimit : bool — true activates gradient fill
    ├── PercentageText : string — footer left label (e.g. "0.45%")
    └── LimitValue : string — footer right label (e.g. "99:33")

Usage context

Screen	Node	Instances	Labels seen
FTDT — Cumulative Limitations	4535:14038	5	Flight Hours: "672hrs in 672hrs", "1000hrs in 365days" · Duty Period Hours: "100hrs in 168hrs", "100hrs in 672hrs" + more
FTDT — Duty Periods (per card)	4544:5877	1 per card	"Max Duty Period 14:00"
FTDT — Archived Logs (per card)	4575:9452	1 per card	"Max Duty Period 14:00"

Developer Notes

Gradient annotation: Figma explicitly annotates the at-limit fill: "gradient style for all progress bar fills" — applies universally, not just to the flight hours bar.
Fill width: computed as Percentage × 100% on the CSS fill element. The track uses overflow:hidden so the fill never exceeds the track bounds.
MEC theming: interactive/blue-lt is an accent token that may be overridden per MEC. The gradient endpoint (red/500) is semantic and should NOT be MEC-themed — it always signals a limit state regardless of airline brand.
Implementation gated: No Razor/C# work until Epic AB#2087 (Presentation Extraction) is delivered.

Blazor Component API

Target home: ALPAMobile.HybridUi (shared Razor class library). Component file: ProgressBar.razor.

Parameter	Type	Required	Description
`Label`	`string`	Yes	Limit descriptor — left label (e.g. "1000hrs in 365days").
`CurrentValue`	`string`	Yes	Limit descriptor — right value (e.g. "0:29").
`Percentage`	`double`	Yes	Fill width as a fraction 0.0–1.0. Rendered as `width:@(Percentage*100)%`.
`IsAtLimit`	`bool`	Yes	When true, applies `alpa-progress-bar__fill--limit` gradient modifier.
`PercentageText`	`string`	Yes	Footer row — left label (e.g. "0.45%").
`LimitValue`	`string`	Yes	Footer row — right label (e.g. "99:33").

Razor Usage (target)

@* Standalone — e.g. Cumulative Limitations screen *@
<AlpaProgressBar Label="@Vm.Label"
                 CurrentValue="@Vm.CurrentValue"
                 Percentage="@Vm.Percentage"
                 IsAtLimit="@Vm.IsAtLimit"
                 PercentageText="@Vm.PercentageText"
                 LimitValue="@Vm.LimitValue" />

@* Composed inside DutyPeriodCard.razor (MaxDutyBar slot) *@
<AlpaProgressBar Label="@Vm.MaxDutyBar.Label"
                 CurrentValue="@Vm.MaxDutyBar.CurrentValue"
                 Percentage="@Vm.MaxDutyBar.Percentage"
                 IsAtLimit="@Vm.MaxDutyBar.IsAtLimit"
                 PercentageText="@Vm.MaxDutyBar.PercentageText"
                 LimitValue="@Vm.MaxDutyBar.LimitValue" />

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-progress-bar BEM block. The --limit modifier is the only state variant.

Class	Scope	Key rules
`.alpa-progress-bar`	Root wrapper	`display:flex; flex-direction:column; width:100%`
`.alpa-progress-bar__label-row`	Top row (label + value)	`display:flex; justify-content:space-between; align-items:center; margin-bottom:8px`
`.alpa-progress-bar__label`	Left limit descriptor	`font-family:var(--font-family/alt); font-weight:600; font-size:18px; color:var(--text-primary)`
`.alpa-progress-bar__value`	Right current value	Same as `__label`
`.alpa-progress-bar__track`	Backing bar	`background:var(--surface-subtle); height:5px; border-radius:10px; overflow:hidden`
`.alpa-progress-bar__fill`	Blue fill	`height:100%; border-radius:10px; background:var(--interactive-blue-lt)` · width set inline from `Percentage`
`.alpa-progress-bar__fill--limit`	At-limit fill modifier	`background:linear-gradient(to right, var(--interactive-blue-lt), var(--status-error))`
`.alpa-progress-bar__footer-row`	Bottom row (pct + limit)	`display:flex; justify-content:space-between; align-items:center; margin-top:4px`
`.alpa-progress-bar__pct`	Footer left	`font-family:var(--font-family/body); font-weight:var(--font-weight/heavy); font-size:16px; color:var(--text-primary)`
`.alpa-progress-bar__limit-val`	Footer right	Same as `__pct`