2 min read
Step 2: Timer UI
Build the circular timer display with a ring indicator.
Where We Are
You have a basic app shell with static text. Now let’s build the signature Pomodoro look — a circular progress ring.
Draw the Ring
Create a circular timer view that shows:
- A background circle (gray, thin stroke)
- A foreground circle (colored, same stroke) that represents remaining time
- The time displayed in large text in the center (like "25:00")
Use SwiftUI's Circle shape with .trim(from:to:) for the progress arc.
The ring should start from the top (12 o'clock position).
Use a stroke width of about 12 points.Style It
Make the timer view look clean:
- Use a dark background for the whole screen
- Make the progress ring a bright accent color (like orange or teal)
- Use a large, monospaced font for the time text so digits don't jump around
- Add some padding so the ring doesn't touch the edges
- The ring should be about 280 points wideAdd Controls
Below the timer ring, add three buttons in a row:
- "Reset" on the left (SF Symbol: "arrow.counterclockwise")
- "Start" in the center (SF Symbol: "play.fill"), larger than the others
- A placeholder button on the right for later (SF Symbol: "gear")
Style the Start button as a filled circle with the icon inside.
Make Reset and Settings buttons smaller and more subtle.Test It
- Run the app
- You should see a circular ring with “25:00” in the center
- Three buttons below the ring
- Nothing works yet — that’s next
The ring should look like a full circle for now (representing 100% time remaining).
Checkpoint
By now you should have:
- Circular progress ring displays correctly
- Time shows in the center of the ring
- Start, Reset, and Settings buttons visible
- Clean, dark-themed layout
What You Learned
- SwiftUI Circle and .trim() for progress arcs
- Overlay and ZStack for layering views
- SF Symbols for button icons
- Monospaced fonts for stable number display