Screen · Commerce
Order SwiftUI Screen
A delivery status timeline that advances live, with a courier card and a counting ETA.
An order tracking screen: a vertical status timeline whose connector draws as each step lands, the active step breathing, a courier card and an ETA that counts down on a real clock.
- SwiftUI
- iOS 17.0+
- order-tracking
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- A status timeline that advances with a drawing connector
- The active step breathes; completed steps snap to filled
- A courier card and an ETA anchored to a real clock
- The Order screen from the preview: items, totals and support
In the Build Kit
Sol (style), Shopping (brief), Shop and Track (recipe). Your agent builds around this screen in the same design.
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
Set current to the stage the order is on and the timeline does the rest: the connector between the finished stage and the next one draws in from the top, the stage behind it snaps to a filled marker with a check, and the stage now in progress keeps a soft halo until the order moves again. Stages still ahead stay hollow on the track color, so the rail reads as a single line being filled. The screen around it counts the arrival down from a real date and carries the courier and the totals as color blocks.
Notes
OrderTrackingtakes its data and its styling through parameters and reads no theme, so the same timeline works for a food order, a parcel, a return or a refund. Advancing is one value change; nothing is stored inside the view.- The rail stretches to the height of its row, so a two-line stage detail or accessibility text sizes never leave a gap between markers. Rows keep a 44pt minimum height whatever
markerSizeis. - The connector is drawn by scaling a capsule from its top edge rather than animating a height, so the draw stays smooth at any row height.
- Each stage is one VoiceOver element reading its title and its state ("With the courier, In progress, Rosa picked it up at 4:26 PM"); the timeline itself reports the stage and its position. A light impact fires when
currentchanges. - Reduce Motion drops the halo around the stage in progress and replaces the spring with a short ease; the rail still draws so the change is never silent.
- The example anchors the arrival to a
Dateand reads it through aTimelineView, so the countdown keeps time while the app is away instead of counting frames. OrderTrackingExampleat the end ofOrderTracking.swiftis the screen shown in the preview; copy it as a starting point.
03
Keep building
Pieces that work well next to this one.