Gradient Progress Bar

You can add Gradient Progress Bar to your project using Swift Package Manager (SPM) either through the Xcode UI or by manually editing your Package.swift file.

Xcode Installation

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

Manual Package.swift Installation

Add the repository to your dependencies array and reference the product in your target configuration:

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

// In your target configuration:
.product(
  name: "GradientProgressBar",
  package: "GradientProgressBar"
)

After installation, import the framework in your code:

import GradientProgressBar

Since v2.1.0, the library provides a custom ProgressViewStyle called .gradientProgressBar. You can apply it to a standard SwiftUI ProgressView.

Basic Usage

ProgressView(value: progress)
  .progressViewStyle(.gradientProgressBar)
  .frame(height: 3)

Configuration

You can customize the appearance using the .gradientProgressBar modifier:

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 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, use the standard SwiftUI .animation(_:value:) modifier:

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

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
      }
    }
  }
}

In UIKit, GradientProgressBar is a subclass of UIProgressView. You can add it to your view hierarchy and configure it like a standard progress view.

Basic Usage

let gradientProgressBar = GradientProgressBar()
gradientProgressBar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(gradientProgressBar)

// Set constraints and progress
gradientProgressBar.progress = 0.5

Configuration

Use the following properties to customize the bar:

• animationDuration: TimeInterval: Controls the duration of animated updates when calling setProgress(_:animated:).
• gradientColors: [UIColor]: The colors used for the gradient.
• timingFunction: TimingFunction: Adjusts the animation timing function for animated updates.

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

Updating Progress

You can update progress using either the standard property or the animated method:

// Animated update
gradientProgressBar.setProgress(0.75, animated: true)

// Immediate update
gradientProgressBar.progress = 0.75

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
  }
}