mirror of
https://github.com/fxm90/GradientLoadingBar.git
synced 2026-06-16 12:24:31 +00:00
133 lines
6.1 KiB
Markdown
133 lines
6.1 KiB
Markdown
GradientLoadingBar
|
||
====================
|
||
|
||
 [](https://travis-ci.org/fxm90/GradientLoadingBar) [](http://cocoapods.org/pods/GradientLoadingBar) [](http://cocoapods.org/pods/GradientLoadingBar) [](http://cocoapods.org/pods/GradientLoadingBar)
|
||
|
||
### Example
|
||
A customizable animated gradient loading bar. Inspired by [iOS 7 Progress Bar from Codepen](https://codepen.io/marcobiedermann/pen/LExXWW).
|
||
|
||
|
||
|
||
To run the example project, clone the repo, and run `pod install` from the Example directory first.
|
||
|
||
### Integration
|
||
##### CocoaPods
|
||
GradientLoadingBar can be added to your project using [CocoaPods](https://cocoapods.org/) by adding the following line to your Podfile:
|
||
```
|
||
pod 'GradientLoadingBar', '~> 1.0'
|
||
```
|
||
##### Carthage
|
||
To integrate GradientLoadingBar into your Xcode project using [Carthage](https://github.com/Carthage/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`](https://github.com/roberthein/Observable)) into your Xcode project.
|
||
|
||
### How to use
|
||
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()`.
|
||
```swift
|
||
let gradientLoadingBar = GradientLoadingBar()
|
||
gradientLoadingBar.show()
|
||
|
||
// Do e.g. server calls etc.
|
||
|
||
// Be sure to call this on the main thread.
|
||
gradientLoadingBar.hide()
|
||
```
|
||
### Configuration
|
||
You can overwrite the default configuration by calling the initializers with the optional parameters `height`, `durations`, `gradientColorList`, `isRelativeToSafeArea` and `onView`:
|
||
```swift
|
||
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
|
||
)
|
||
```
|
||
|
||
#### – Parameter `height`
|
||
By setting this parameter you can set the height for the loading bar (defaults to `2.5`)
|
||
|
||
#### – Parameter `durations`
|
||
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)`
|
||
|
||
#### – Parameter `gradientColorList`
|
||
The gradient colors are fully customizable. Therefore, you'll have to pass an array of type `UIColor`.
|
||
|
||
#### – Parameter `isRelativeToSafeArea`
|
||
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][basic-example--thumbnail]][basic-example]
|
||
|
||
|
||
Example with `isRelativeToSafeArea` set to `false`
|
||
[![Example][safe-area-example--thumbnail]][safe-area-example]
|
||
|
||
|
||
#### – Parameter `onView`
|
||
With this parameter you can pass a custom superview to the gradient loading bar.
|
||
|
||
E.g. Loading bar shown on `UINavigationBar`
|
||
[![Example][navigation-bar-example--thumbnail]][navigation-bar-example]
|
||
|
||
|
||
E.g. Loading bar shown on `UIButton`
|
||
[![Example][advanced-example--thumbnail]][advanced-example]
|
||
|
||
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()`.
|
||
|
||
|
||
#### – Custom shared instance (Singleton)
|
||
If you need the loading bar on different parts of your app, you can use the given static `shared` variable:
|
||
```swift
|
||
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:
|
||
```swift
|
||
GradientLoadingBar.shared = GradientLoadingBar(
|
||
height: 3.0,
|
||
durations: Durations(fadeIn: 1.0, fadeOut: 2.0, progress: 3.00),
|
||
gradientColorList: [
|
||
.red, .yellow, .green
|
||
]
|
||
)
|
||
```
|
||
|
||
### Usage with PromiseKit
|
||
Check out [my GitHub Gist](https://gist.github.com/fxm90/698554e8335f34e0c6ab95194a4678fb) on how to easily use GradientLoadingBar with [PromiseKit](http://promisekit.org/).
|
||
|
||
### Author
|
||
Felix Mau (contact(@)felix.hamburg)
|
||
|
||
### License
|
||
|
||
GradientLoadingBar is available under the MIT license. See the LICENSE file for more info.
|
||
|
||
[basic-example]: https://felix.hamburg/files/github/gradient-loading-bar/basic-example.png
|
||
[basic-example--thumbnail]: https://felix.hamburg/files/github/gradient-loading-bar/basic-example--thumbnail.png
|
||
|
||
[safe-area-example]: https://felix.hamburg/files/github/gradient-loading-bar/safe-area-example.png
|
||
[safe-area-example--thumbnail]: https://felix.hamburg/files/github/gradient-loading-bar/safe-area-example--thumbnail.png
|
||
|
||
[advanced-example]: https://felix.hamburg/files/github/gradient-loading-bar/advanced-example.png
|
||
[advanced-example--thumbnail]: https://felix.hamburg/files/github/gradient-loading-bar/advanced-example--thumbnail.png
|
||
|
||
[navigation-bar-example]: https://felix.hamburg/files/github/gradient-loading-bar/navigation-bar-example.png
|
||
[navigation-bar-example--thumbnail]: https://felix.hamburg/files/github/gradient-loading-bar/navigation-bar-example--thumbnail.png
|