Chapter 30
Creating an Animated Activity Ring with Shape and Animatable

The built-in Activity app uses three circular progress bars to show your progress in Move, Exercise, and Stand. This type of progress bar is known as an activity ring. If you haven't used the Activity app or are not familiar with activity rings, take a look at Figure 1. The Apple Watch has played a significant role in popularizing this round progress bar as a UI pattern.

Figure 1. A sample activity ring
Figure 1. A sample activity ring

In this chapter, we will explore its implementation and build a similar activity ring in SwiftUI. Our goal is not just to create a static activity ring, but an animated one that shows progress changes, like the one shown in Figure 2. You can also check out the demo video at https://link.appcoda.com/progressring.

Figure 2. Animated progress ring
Figure 2. Animated progress ring

To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.

results matching ""

    No results matching ""