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.
$199 once, every piece included. See how installing works · Sign in
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
Health and Fitness (brief). Your agent builds around this screen in the same design.
Fitness App (template)
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 perProgressPeriod.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'sProgressPoints (days for a week or a month, weeks for a year), itsPersonalBests and itsFocusShares. - 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.
selectionbinds the period on screen; leave it out and the control keeps its own.phase: .loadingdraws placeholders,.failed(message)shows the message withonRetry, 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.
TrainingProgressExampleat the end ofTrainingProgress.swiftis the screen in the preview, the Progress tab of a native four-tabTabView, on the last seven days of an eight-week program. Copy it as a starting point.
Keep building
Pieces that work well next to this one.