top of page

Using ProgressView to animate timers in Dynamic Island

  • lioneldude
  • Jun 15
  • 1 min read

Updated: Jun 16

Download MyChronoPro, now support session history in version 1.1!

https://apps.apple.com/us/app/mychronopro/id6746975883 ProgressView is an API that was introduced in iOS 14. It is a view that shows the progress towards the completion of a task.



In the OneTimer app that I have on my GitHub at: https://github.com/lioneldude83/OneTimer-LiveActivityIntents


I have updated the TimerAttributes as:

struct TimerAttributes: ActivityAttributes {

    public struct ContentState: Codable, Hashable {

        var endTime: Date?

        var isPaused: Bool

        var adjustedRemainingTime: TimeInterval?

        var totalDuration: TimeInterval

    }

    

    var uniqueID: String

}


So by passing in the totalDuration of the Timer when we start the timer in Live Activity, we are able to add the ProgressView implementation into the Dynamic Island.


When the Timer is running, use the following code snippet as:

ProgressView(timerInterval: start...end, countsDown: true, label: { EmptyView() }, currentValueLabel: { Image(systemName: "pause.fill").scaleEffect(0.85) })


Where timerInterval is the date range over which the view would progress, countsDown set to true to display a progression ring. label and currentValueLabel if not specified would show an animation text counting down in the progress view.


And lastly for the progress view to show as a circle, apply the modifier .progressViewStyle(.circular) to the ProgressView.


Dynamic Island Compact Leading showing a progress ring, total duration of timer is 30secs
Dynamic Island Compact Leading showing a progress ring, total duration of timer is 30secs


When paused, use an appropriate SF symbol to indicate the state of the timer
When paused, use an appropriate SF symbol to indicate the state of the timer

Check out the updated code on my GitHub for TimerWidgetLiveActivity and TimerAttributes.

Comments


bottom of page