📊 A customizable gradient progress bar (UIProgressView).

Felix M.

Last update: Dec 16, 2022

Related tags

UI swift ios cocoapods gradient uiprogressview

Overview

GradientProgressBar

A customizable gradient progress bar (UIProgressView). Inspired by iOS 7 Progress Bar from Codepen.

Example

To run the example project, clone the repo, and open the workspace from the Example directory.

Requirements

Swift 5.0
Xcode 11
iOS 9.0+

Integration

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate GradientProgressBar into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'GradientProgressBar', '~> 2.0'

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate GradientProgressBar into your Xcode project using Carthage, specify it in your Cartfile:

github "fxm90/GradientProgressBar" ~> 2.0

Run carthage update to build the framework and drag the built GradientProgressBar.framework, as well as the dependency LightweightObservable.framework, into your Xcode project.

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. It is in early development, but Gradient Progress Bar does support its use on supported platforms.

Once you have your Swift package set up, adding Gradient Progress Bar as a dependency is as easy as adding it to the dependencies value of your Package.swift.

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

How to use

Simply drop a UIView into your View Controller in the Storyboard. Select your view and in the Identity Inspector change the class to GradientProgressBar.

Don't forget to change the module to GradientProgressBar too.

Setup the constraints for the UIView according to your needs.

Import GradientProgressBar in your view controller source file.

import GradientProgressBar

Create an IBOutlet of the progress view in your view controller source file.

@IBOutlet weak var gradientProgressView: GradientProgressBar!

After that you can set the progress programmatically as you would do on a normal UIProgressView.

gradientProgressView.setProgress(0.75, animated: true)

gradientProgressView.progress = 0.75

Configuration

– Property `animationDuration`

Adjusts the animation duration for calls to setProgress(_:animated:):

progressView.animationDuration = 2.0
progressView.setProgress(progress, animated: true)

– Property `gradientColors`

Adjusts the colors, used for the gradient inside the progress-view.

progressView.gradientColors: [UIColor] = [
    .red,
    .white,
    .blue
]

– Property `timingFunction`

Adjusts the timing function for calls to setProgress(_:animated:), with animated set to true.

progressView.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

Troubleshooting

Interface Builder Support

Unfortunatly the Interface Builder support is currently broken for Cocoapods frameworks. If you need Interface Builder support, add the following code to your Podfile and run pod install again. Afterwards you should be able to use the GradientProgressBar inside the Interface Builder :)

  post_install do |installer|
    installer.pods_project.build_configurations.each do |config|
      next unless config.name == 'Debug'

      config.build_settings['LD_RUNPATH_SEARCH_PATHS'] = [
        '$(FRAMEWORK_SEARCH_PATHS)'
      ]
    end
  end

Source: Cocoapods – Issue 7606

Show progress of `WKWebView`

Based on my gist, the example application also contains the sample code, for attaching the progress view to a UINavigationBar. Using "Key-Value Observing" we change the progress of the bar accordingly to the property estimatedProgress of the WKWebView.

Please have a look at the example application for further details :)

Author

Felix Mau (me(@)felix.hamburg)

License

GradientProgressBar is available under the MIT license. See the LICENSE file for more info.

Comments

Timing parameter for render a new color set

Hi. Is there any way to change timing parameter for render a new color set? Now it's executed with lite fade, but sometimes I need to change color immediately. For example in viewDidAppear method, for prepare UI.

opened by JLightMedia 6

GradientProgressBar couldn't be subclassed

GradientProgressBar couldn't be subclassed outside the its module for now, cause it's a public class. I think it would be better to change public class to open one.

// error message
// Cannot inherit from non-open class 'GradientProgressBar' outside of its defining module


public class GradientProgressBar: UIProgressView {}
// ->
open class GradientProgressBar: UIProgressView {}

opened by iTofu 4

cornerRadius for the layers does not work

setting the cornerRadius property for both layers: the gradient layer and mask layer has no effect, is there a way to change the corner radius for them so that (for example) the edges of the progress appear rounded ?

opened by murad1981 4
init(dynamicProvider:)' is only available in tvOS 13.0 or newer

I'm getting error for availability of API. Error is in an extension. I'm using swift package manager and i'm on latest version of library which is 2.0.3.

opened by shahbazsaleem01 3
Run Failed

/Users/libern/Library/Developer/Xcode/DerivedData/GradientProgressBar-abnadadssqkjjaabhyarqsrpdscz/Build/Intermediates.noindex/GradientProgressBar.build/Debug-iphoneos/GradientProgressBar_Example.build/Script-970D1F17201BB73D00F90864.sh: line 8: 62282 Killed: 9 $SWIFTFORMAT ../ Command PhaseScriptExecution failed with a nonzero exit code

opened by libern 2
Add support for SwiftUI
Open Tasks

[x] Check CI

[x] Check CocoaPods integration works

[x] Check Carthage integration works

[x] Check SPM integration works

[x] Update documentation for SwiftUI code

[x] Update README.md
opened by fxm90 0