leontedev / AnimatedBarCharts

SwiftUI - Animated Progress Bar Charts experiment

Animated Progress Bar Charts

A SwiftUI experiment on capsules. Starting point tutorial: Let’s Build That App

• ZStack with a colored background:

Color("appBackground").edgesIgnoringSafeArea(.all)

• Adding a “Color Literal” (autocompletion) to pick colors and use them directly in code. The Color() view is necessary.
• Creating a “Progress Bar” using two Capsules()

ZStack(alignment: .bottom) {
    Capsule().frame(width: 30, height: 200)
        .foregroundColor(Color("emptyCapsule"))
    Capsule().frame(width: 30, height: value)
        .foregroundColor(Color("filledCapsule"))
}

• Adding animation on the entire HStack view which contains all the horizontal progress bars using the .animation(.default) modifier.