Progress Bar (3 Segments)

The Progress Bar (3 Segments) is a horizontal bar split into three colored zones — green for complete, orange for incomplete and red for untreated — with widths driven by CountIf formulas over a collection, plus a summary label. It visualises the make-up of a workload in one glance, not just a single percentage.

Pro component

Subscribe to access this component and the full library.

View plans

Progression des sujets

20 éléments — 9 complets / 6 incomplets / 5 non traités

Complet 45%

Incomplet 30%

Non traité 25%

YAML source

Preview — full code with PRO

- ProgressBarContainer:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(240, 240, 240, 1)
      Height: =28
      RadiusBottomLeft: =20
      RadiusBottomRight: =20
      RadiusTopLeft: =20
      RadiusTopRight: =20
      Width: =800
    Children:
      - ProgressSegmentGreen:
# … full component definition unlocked with PRO

This is a partial preview. Unlock the full component →

Common use cases

Workload breakdown

Show how many items are done, in progress and untouched across a project or queue.

Survey or checklist status

Visualise completion across many sub-items with proportional colour bands.

Dashboard health bar

Give leaders a single bar that summarises the state of a whole process.

How to use Progress Bar (3 Segments) in Power Apps

1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
2Click "Copy YAML" to copy the full component definition to your clipboard.
3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Adapt the CountIf conditions to your own status field names so each segment counts the right records.

Related charts components

SVG Line Chart

SVG Donut Chart

SVG Bar List

SVG Heatmap