Screen · Health

New

Progress

Training progress as a load curve you scrub, personal bests with their climb, and where your work went.

A progress tab for training apps: the period's time in giant light numerals with its change, then sessions, load and streak, a load curve you scrub day by day with a glow under it, personal bests with a sparkline of each climb and new ones marked, and the split of your training by focus as one segmented bar. Week, month and year switch with the figures rolling and the curve drawing itself again, with designed loading, empty and error states.

SwiftUIiOS 17.0+training-progress

Get Swift Pieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • The period's totals in light giant numerals that roll as you switch
  • A load curve you scrub day by day, with a haptic per day
  • Personal bests with a sparkline of each climb, new ones marked
  • Your training split by focus as one segmented bar
  • Week, month and year from one control

In the Build Kit

Health and Fitness (brief). Your agent builds around this screen in the same design.

Used in

Fitness App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

A capsule control switches Week, Month and Year, its thumb sliding to the period you pick while the figures roll. The period's time sits as a giant light numeral with a delta chip against the period before, then sessions, load and the streak between hairlines. Under them the load curve draws the period day by day as one smooth line, rest days down at zero, with the haze glowing under it in Pearl and a flat tint in other families. Drag across it and a hairline, a dot and the day's load follow your finger with a tick for every day. Personal bests list the lift, the best as a numeral, the change and the date beside a sparkline of the climb in the row's block, and fresh ones carry a small New best with a dot. Last, one segmented bar shows where the time went by focus, legs, push, pull and core, in the rhythm strip's language of blocks with 2pt gaps.

Notes

  • Give TrainingProgress(periods:) a [ProgressPeriod], one per ProgressPeriod.Kind (week, month, year). Each carries its minutes, its change against the period before (nil when there is nothing to compare), sessions, load, streak, the curve's ProgressPoints (days for a week or a month, weeks for a year), its PersonalBests and its FocusShares.
  • The curve is a monotone cubic through the points, so a rest day sits on zero instead of dipping below it and a peak never overshoots. It draws itself again when the period changes.
  • selection binds the period on screen; leave it out and the control keeps its own. phase: .loading draws placeholders, .failed(message) shows the message with onRetry, and a period with no training shows a dashed ghost of a curve and "Your first session starts the curve".
  • VoiceOver reads the totals as text, the curve as one adjustable element that steps day by day ("Thu Oct 1 · 31 min, load 248"), and each best with its change and date. The control's selected period carries the selected trait.
  • Reduce Motion skips the curve's draw-on and turns the control's spring and the rolling figures into short eases. Reduce Transparency fills under the curve with a flat tint instead of the haze.
  • TrainingProgressExample at the end of TrainingProgress.swift is the screen in the preview, the Progress tab of a native four-tab TabView, on the last seven days of an eight-week program. Copy it as a starting point.