Progress Bar — GCash DS Assessment

KeepReady

A linear progress indicator in 10% steps, from 0 to 100. Its track and fill colours come from colour variables.

Keep — all four traits pass

Nothing is open. Progress steps 0–100 in tens by design; the track and fill are vector lines bound to colour variables, which carry the success and error looks.

In Context

How the progress bar appears in a real product screen — the GCredit credit-limit bar, showing ₱3,311.00 used out of 10,000.00.

Progress Bar component shown on the GCash GCredit screen: under 3,311.00 used out of 10,000.00, a bar filled about one third of the way, above the remaining and total credit limits

Live Preview

Properties

Progress

DS Health

Reusable

Pass

Generic task-progress primitive — fits anywhere a linear completion indicator is needed (KYC, uploads, wizards).

Self-contained

Pass

Track and fill are vector lines with token-bound strokes — no raster assets ship with the component.

Consistent

Pass

Progress steps 0–100 in tens by design, the layers are named track and fill, and colour states come from variables rather than variants.

Composable

Pass

The bar fills its container’s width (Fill), so it stretches inside any layout.

Behavior

State	iOS	Android	Figma Property	Notes
Determinate	Yes	Yes	<code>Progress=0…100</code>	The fill grows left to right in 10% steps.
Success / Error	Yes	Yes	Colour variables	Set by the colour variables bound to the track and fill, not by a variant.

Issues

Track and fill are raster PNGs: the back and front layers are vector lines with token-bound strokes; the set has no images — checked on node 18577:13227 (C6)
Progress is an enum of 10% steps, not a value: withdrawn — 10% steps are the intended design; owner decision, 6 Oct 2026 (C2)
Layer names are structural (back / front), not semantic: resolved — the layers are track, fill-container and fill, node 4244:187349 (C1)
No indeterminate, success, or error state modeled: withdrawn — states are not variants: success, error and other looks come from the colour variables bound to the track and fill; owner decision, 6 Oct 2026 (C5)
Property name percentage reads as a unit, not a ratio: resolved — the property is Progress, node 4244:187349 (C2)

Component Playground

Layout

Typography

Colors

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:progress-bar:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.progressbar.*

Property Mapping

Read off the property panel of set 4244:187349: one variant property, Progress.

Figma Property	SwiftUI	Compose
Progress — 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100	`progress: Float (0–1)`	`progress: Float (0f–1f)`
— no Figma property (the track and fill colours, set through colour variables)	`.tint(Color)`	`color = …, trackColor = …`

Requirement	iOS	Android
Progress role	`ProgressView` exposes the progressbar trait automatically. Set `.accessibilityLabel("Verification progress")` for context.	`LinearProgressIndicator` emits `ProgressBarInfo` via semantics automatically. Set `Modifier.semantics { contentDescription = "Verification progress" }`.
Value announcement	VoiceOver reads the current value (0–100%). For non-percentage ranges, use `.accessibilityValue("\(step) of \(total)")`.	TalkBack reads the progress fraction. For custom phrasing, set `stateDescription`.
Indeterminate	Announce a localized label ("Loading…"). Avoid announcing a fake percentage.	Same — `LinearProgressIndicator()` with no `progress` lambda handles this natively.
Contrast	Fill #005CE5 on track #D2E5FF = 3.1:1 — passes 3:1 for non-text graphics (WCAG 1.4.11). OK.	Same ratio.
Reduced motion	Indeterminate animation should honor `UIAccessibility.isReduceMotionEnabled`. Native `ProgressView` does this automatically.	Native `LinearProgressIndicator` already respects `Animator.getDurationScale`.

Usage Guidelines

Do

Use it for a known, measurable amount — a credit limit used, steps of a task completed.

Don't

Don’t use it for an open-ended wait. The set has no indeterminate state; use a loader instead.

Do

Show the value next to the bar, as GCredit does with ₱3,311.00 of 10,000.00.

Don't

Don’t rely on the bar alone to tell people an amount — it carries no text.

Do

Show success or error by switching the track and fill colours.

Don't

Don’t invent new colours or ask for a new variant for each status.

Do

Let the bar fill the width of its container.

Don't

Don’t give it a fixed width that leaves it short or overflowing on other screens.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Layers are named `track`, `fill-container` and `fill`.
C2	Variant & Property Naming	Ready	`Progress`, 0–100 in steps of 10 — the intended design.
C3	Token Coverage	Ready	Track and fill strokes are bound to two library colour variables in all variants. Their names are not in the token database yet, so they read Missing rather than guessed.
C4	Native Mappability	Ready	Maps 1:1 to `ProgressView(value:)` / `LinearProgressIndicator`. No custom gesture or web-only patterns.
C5	Interaction State Coverage	Ready	One determinate look in 10% steps by design. Success, error and other states come from the colour variables, not from variants.
C6	Asset & Icon Quality	Ready	Track and fill are vector lines with token-bound strokes; no raster assets.

Variants Inventory (11 total)

1 Progress setting × 11 values (0–100 in steps of 10) = 11 variants — the intended design.

Property	Values	Count
Progress	0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100	11

View full Progress breakdown (11 rows)

Progress	Node
0	4244:187350
10	4244:187352
20	4244:187356
30	4244:187360
40	4244:187364
50	4244:187368
60	4244:187372
70	4244:187376
80	4244:187380
90	4244:187384
100	4262:190138

2.0.0 — October 2026Major

Repointed to the Working File set · node 4244:187349

Documented from the Working File set. The page moved from Sticker Sheet 18577:13227 to 4244:187349: percentage became Progress, and the layers are track / fill.

C1 C2 Resolved

10% steps and variable-driven colour states are the intended design. Owner decision — the enum and missing-state issues are withdrawn, and the matching recommendations dropped.

C2 C5 Withdrawn

Keep · Ready. Consistent → pass; C1, C2, C3, C5 → ready. Property Mapping, Variants, Behavior and the Live Preview now describe the Working File set.

Docs

1.1.0 — October 2026Minor

Component Review against the current set · node 18577:13227

Track and fill are raster PNGs. the back and front layers are vector lines with token-bound strokes; the set has no images.

C6 Resolved

DS Health re-rated against node 18577:13227. Self-contained → pass, Composable → pass.

Docs

Consistent re-rated fail → warn, verdict Restructure → Fix. With the raster assets gone, nothing blocks native implementation outright; the 10% enum and missing states limit handoff, which the guide rates Warn. One warn trait among passes is a Fix verdict.

Docs

1.0.0 — April 2026Major

Initial Assessment · node 18577:13227

Verdict: Restructure — Collapse 11 percentage variants into a single component with continuous progress: Float (0–1). Add state axis (determinate / indeterminate / success / error). Replace raster back/front with token-bound rectangles. Open

Schema

C1 — Layer naming — Rename back → Track and front → Fill. Aligns with native terminology. Open

C2 — Continuous value — Replace percentage: 0 | 10 | … | 100 enum with progress: Float (0–1). Renaming from percentage to progress aligns with iOS / Compose conventions. Open

C5 — Missing states — Add indeterminate, success, error variants. Native ProgressView / LinearProgressIndicator support these out of the box. Open

C6 — Raster fills — Replace <img> back/front layers with token-bound rectangles using main/progress-bar/color/border-track and main/progress-bar/color/border. Open

C7 — Code Connect — Mappings pending restructure. Blocked until progress is parameterized and rasters replaced. Open

Component Playground

Layout

VStack

Typography

Colors

Do

Don't

Do

Don't

Do

Don't

Do

Don't