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.
GradientLoadingBar can be added to your project using CocoaPods by adding the following line to your Podfile:
pod 'GradientLoadingBar', '~> 1.0'
To integrate GradientLoadingBar into your Xcode project using Carthage, specify it in your Cartfile:
github "fxm90/GradientLoadingBar" ~> 1.0
Run carthage update to build the framework and drag the built GradientLoadingBar.framework (as well as the dependency Observable.framework) into your Xcode project.
To get started you'll have to import GradientLoadingBar into your file. To show the loading 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.
// Be sure to call this on the main thread.
gradientLoadingBar.hide()You can overwrite the default configuration by calling the initializers with the optional parameters height, durations, gradientColorList, isRelativeToSafeArea and onView:
let gradientLoadingBar = GradientLoadingBar(
height: 3.0,
durations: Durations(fadeIn: 1.5,
fadeOut: 2.0,
progress: 2.5)
gradientColorList: [
.red, .yellow, .green
],
isRelativeToSafeArea: true,
onView: self.view
)By setting this parameter you can set the height for the loading bar (defaults to 2.5)
By setting this parameter you set the durations (fade-in, fade-out, progress) for the loading bar.
To customize these, you have to pass in an instance of the struct Durations, which has the following initializer:
public init(fadeIn: Double = 0.0, fadeOut: Double = 0.0, progress: Double = 0.0)
These are the default duration values:
public static let default = Durations(fadeIn: 0.33, fadeOut: 0.66, progress: 3.33)
The gradient colors are fully customizable. Do do this, you'll have to pass an array of type UIColor.
With this parameter you can configure, whether the loading bar should be positioned relative to the safe area (defaults to true).
Example with isRelativeToSafeArea set to true
Example with isRelativeToSafeArea set to false
With this parameter you can pass a custom superview to the gradient loading bar.
E.g. Loading bar shown on UINavigationBar
E.g. Loading bar shown on UIButton
To see all these configurations in a real app, please have a look at the example application. For further customization you can also subclass GradientLoadingBar and overwrite the method setupConstraints(). This is also done for showing the loading bar at the bottom of the UINavigationBar. Therefore, this module contains furthermore the class BottomGradientLoadingBar, which basically just overwrites the method setupConstraints().
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: [
.red, .yellow, .green
]
)Check out my GitHub Gist on how to easily use GradientLoadingBar with PromiseKit.
Felix Mau (contact(@)felix.hamburg)
GradientLoadingBar is available under the MIT license. See the LICENSE file for more info.