Gradient Progress Bar

A customizable gradient progress bar (UIProgressView), with full support for SwiftUI and UIKit.
Inspired by iOS 7 Progress Bar on CodePen.

Screenshots

To run the example project, clone this repository and open the project file from the Example directory.

Requirements

• Swift 6.2
• Xcode 26
• iOS 26.0+

Compatibility Notes

• iOS < 26.0 / CocoaPods / Carthage support
  Use version 3.x.x
• iOS < 13.0 support
  Use version 2.x.x

Installation

Swift Package Manager

Gradient Progress Bar is distributed via Swift Package Manager (SPM). Add it to your Xcode project as a package dependency or adapt your Package.swift file.

Option 1: Xcode

1. Open your project in Xcode
2. Go to File → Add Packages…
3. Enter the package URL: https://github.com/fxm90/GradientProgressBar
4. Choose the version rule (e.g. Up to Next Major starting at 4.0.0)
5. Add the package to your target

Option 2: Package.swift

If you manage dependencies manually, add this repository to the dependencies section of your Package.swift:

dependencies: [
  .package(
    url: "https://github.com/fxm90/GradientProgressBar",
    from: "4.0.0"
  )
]

Then reference the product in your target configuration:

.product(
  name: "GradientProgressBar",
  package: "GradientProgressBar"
)

Once the package is added, import the framework where needed:

import GradientProgressBar

SwiftUI Integration

↓ Scroll down for the UIKit documentation.

Since v2.1.0, Gradient Progress Bar provides a custom ProgressViewStyle for SwiftUI.

Usage

struct ContentView: View {

  @State
  private var progress = 0.5

  var body: some View {
    VStack {
      ProgressView(value: progress)
        .progressViewStyle(.gradientProgressBar)
        .frame(height: 3)

      Button("Update progress") {
        progress += 0.1
      }
    }
  }
}

Configuration

ProgressView(value: progress)
  .progressViewStyle(
    .gradientProgressBar(
      backgroundColor: .gray.opacity(0.05),
      gradientColors: [.indigo, .purple, .pink],
      cornerRadius: 1.5
    )
  )

Parameters

• backgroundColor: Color
  The background color shown behind the gradient (clipped by possible cornerRadius).

• gradientColors: [Color]
  The colors used for the gradient.

• cornerRadius: CGFloat
  The corner-radius used on the background and the progress bar.

Animating Progress Changes

To animate progress updates, add the animation(_:value:) view modifier.

ProgressView(value: progress)
  .progressViewStyle(.gradientProgressBar)
  .animation(.easeInOut, value: progress)

Refer to Apple’s Animation documentation for more advanced customization.

UIKit Integration

↑ Scroll up for the SwiftUI documentation.

Usage

final class UserRegistrationViewController: UIViewController {

  private let gradientProgressBar = GradientProgressBar()

  // ...

  override func viewDidLoad() {
    super.viewDidLoad()

    gradientProgressBar.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(gradientProgressBar)

    NSLayoutConstraint.activate([
      gradientProgressBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      gradientProgressBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      gradientProgressBar.topAnchor.constraint(equalTo: view.topAnchor),
      gradientProgressBar.heightAnchor.constraint(equalToConstant: 3),
    ])

    gradientProgressBar.progress = 0.5
  }
}

Configuration

let gradientProgressBar = GradientProgressBar()
gradientProgressBar.animationDuration = 1
gradientProgressBar.gradientColors = [.systemIndigo, .systemPurple, .systemPink]
gradientProgressBar.timingFunction = .easeInOut

Properties

• animationDuration: TimeInterval
  Controls the duration for animated updates when calling setProgress(_:animated:).

• gradientColors: [UIColor]
  The colors used for the gradient.

• timingFunction: TimingFunction
  Adjusts the animation timing function for animated updates.
  You can find all pre-defined timing functions here.

Updating Progress

You can update progress just like a standard UIProgressView:

gradientProgressBar.setProgress(0.75, animated: true)

or

gradientProgressBar.progress = 0.75

Show progress of WKWebView

Based on my gist, the example app demonstrates how to attach the progress bar to a UINavigationBar.

By observing the estimatedProgress property of WKWebView via Key-Value Observing, the progress bar updates automatically as the page loads.

See the example project for a complete implementation.

Author

Felix Mau me(@)felix.hamburg

License

Gradient Progress Bar is released under the MIT License. See the LICENSE file for details.