GradientLoadingBar

Example

A customizable animated gradient loading bar. Inspired by iOS 7 Progress Bar from Codepen.

To run the example project, clone the repo, and run pod install from the Example directory first.

Integration

GradientLoadingBar can be added to your project using CocoaPods by adding the following line to your Podfile:

pod 'GradientLoadingBar', '~> 1.0'

How to use

To get started you'll have to import GradientLoadingBar into your file. To show the bar, simply call the show() method and after you're done with your operations call hide().

let gradientLoadingBar = GradientLoadingBar()
gradientLoadingBar.show()

// Do e.g. server calls etc.

gradientLoadingBar.hide()

Configuration

You can overwrite the default configuration by calling the initializers with the optional parameters height, durations, gradientColorList and onView:

let gradientLoadingBar = GradientLoadingBar(
    height: 1.0,
    durations: Durations(fadeIn: 1.0, fadeOut: 2.0, progress: 3.0)
    gradientColorList: [
        UIColor(hex: "#4cd964"),
        UIColor(hex: "#ff2d55")
    ]
    onView: self.view
)

For using custom colors you'll have to pass an array with UIColor values. For creating those colors you can use all initializers for UIColor mentioned here: UIColor+Initializers.swift

For an example using the loading bar on a custom superview (e.g. an UIButton or UINavigationBar ) see the example application. For further customization you can also subclass GradientLoadingBar and overwrite the method setupConstraints(). This also shown in the example application.

– Shown underneath navigation bar

– Shown on custom superview

– Custom shared instance (Singleton)

If you need the loading bar on different parts of your app, you can use the given static shared variable:

GradientLoadingBar.shared.show()
// Do e.g. server calls etc.
GradientLoadingBar.shared.hide()

If you wish to customize the shared instance, you can add the following code e.g. to your app delegate didFinishLaunchingWithOptions method and overwrite the shared variable:

GradientLoadingBar.shared = GradientLoadingBar(
    height: 3.0,
    durations: Durations(fadeIn: 1.0, fadeOut: 2.0, progress: 3.00),
    gradientColorList: [
        UIColor(hex: "#4cd964"),
        UIColor(hex: "#ff2d55")
    ]
)

Usage with PromiseKit

Check out my GitHub Gist on how to easily use GradientLoadingBar with PromiseKit.

Author

Felix Mau (contact(@)felix.hamburg)

License

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

BluePick / GradientLoadingBar