mirror of
https://github.com/fxm90/GradientLoadingBar.git
synced 2026-06-16 12:24:31 +00:00
📝 :: Updated documentation
This commit is contained in:
Felix Mau
@@ -1,7 +1,7 @@
|
||||
GradientLoadingBar
|
||||
====================
|
||||
|
||||
 [](https://travis-ci.org/fxm90/GradientLoadingBar) [](http://cocoapods.org/pods/GradientLoadingBar) [](http://cocoapods.org/pods/GradientLoadingBar) [](http://cocoapods.org/pods/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).
|
||||
@@ -17,49 +17,82 @@ GradientLoadingBar can be added to your project using [CocoaPods](https://cocoap
|
||||
pod 'GradientLoadingBar', '~> 1.0'
|
||||
```
|
||||
##### Carthage
|
||||
To integrate GradientLoadingBar into your Xcode project using Carthage, specify it in your Cartfile:
|
||||
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 into your Xcode project.
|
||||
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 bar, simply call the `show()` method and after you're done with your operations call `hide()`.
|
||||
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` and `onView`:
|
||||
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: 1.0,
|
||||
durations: Durations(fadeIn: 1.0, fadeOut: 2.0, progress: 3.0)
|
||||
height: 3.0,
|
||||
durations: Durations(fadeIn: 1.5,
|
||||
fadeOut: 2.0,
|
||||
progress: 2.5)
|
||||
gradientColorList: [
|
||||
UIColor(hex: "#4cd964"),
|
||||
UIColor(hex: "#ff2d55")
|
||||
]
|
||||
.red, .yellow, .green
|
||||
],
|
||||
isRelativeToSafeArea: true,
|
||||
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](https://gist.github.com/fxm90/1350d27abf92af3be59aaa9eb72c9310)
|
||||
|
||||
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__.
|
||||
#### – Parameter `height`
|
||||
By setting this parameter you can set the height for the loading bar (defaults to `2.5`)
|
||||
|
||||
#### – Shown underneath navigation bar
|
||||
|
||||
#### – 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. Do do this, 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()`.
|
||||
|
||||
#### – 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:
|
||||
```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:
|
||||
@@ -68,8 +101,7 @@ GradientLoadingBar.shared = GradientLoadingBar(
|
||||
height: 3.0,
|
||||
durations: Durations(fadeIn: 1.0, fadeOut: 2.0, progress: 3.00),
|
||||
gradientColorList: [
|
||||
UIColor(hex: "#4cd964"),
|
||||
UIColor(hex: "#ff2d55")
|
||||
.red, .yellow, .green
|
||||
]
|
||||
)
|
||||
```
|
||||
@@ -83,3 +115,15 @@ 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.jpg
|
||||
[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.jpg
|
||||
[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.jpg
|
||||
[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.jpg
|
||||
[navigation-bar-example--thumbnail]: https://felix.hamburg/files/github/gradient-loading-bar/navigation-bar-example--thumbnail.png
|
||||
|
||||
Reference in New Issue
Block a user