You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A customizable animated gradient loading bar. Inspired by [iOS 7 Progress Bar from Codepen](https://codepen.io/marcobiedermann/pen/LExXWW).
5
+
A customizable animated gradient loading bar, with support for **SwiftUI** and **UIKit**.\
6
+
Inspired by [iOS 7 Progress Bar on Codepen](https://codepen.io/marcobiedermann/pen/LExXWW).
7
+
8
+
### Screenshot
7
9
8
-
### Example
9
10
![Example][example]
10
11
11
-
To run the example project, clone the repo, and open the workspace from the Example directory.
12
+
To run the example project, clone this repository and open the project from the **Example** directory.
12
13
13
-
### Requirements
14
-
- Swift 5.5
15
-
- Xcode 13
16
-
- iOS 13.0+
14
+
## Requirements
17
15
18
-
**Note:** In case you need support for iOS versions lower than 13, you can fallback to version `2.X.X`.
16
+
- Swift **6.2**
17
+
- Xcode **26**
18
+
- iOS **26.0+**
19
19
20
+
### Compatibility Notes
20
21
21
-
### Integration
22
-
##### CocoaPods
23
-
[CocoaPods](https://cocoapods.org) is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate GradientLoadingBar into your Xcode project using CocoaPods, specify it in your `Podfile`:
22
+
-**iOS < 26.0 / CocoaPods / Carthage support**
23
+
Use version **`3.x.x`**
24
+
-**iOS < 13.0 support**
25
+
Use version **`2.x.x`**
24
26
25
-
```ruby
26
-
pod 'GradientLoadingBar', '~> 3.0'
27
-
```
27
+
## Installation
28
28
29
-
##### Carthage
30
-
[Carthage](https://github.com/Carthage/Carthage) is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate GradientLoadingBar into your Xcode project using Carthage, specify it in your `Cartfile`:
29
+
### Swift Package Manager
31
30
32
-
```ogdl
33
-
github "fxm90/GradientLoadingBar" ~> 3.0
34
-
```
35
-
Run carthage update to build the framework and drag the built `GradientLoadingBar.framework` into your Xcode project.
31
+
**Gradient Loading Bar** is distributed via **Swift Package Manager (SPM)**. Add it to your Xcode project as a package dependency or adapt your `Package.swift` file.
32
+
33
+
#### Option 1: Xcode
36
34
35
+
1. Open your project in **Xcode**
36
+
2. Go to **File → Add Packages…**
37
+
3. Enter the package URL: `https://github.com/fxm90/GradientLoadingBar`
38
+
4. Choose the version rule (e.g. _Up to Next Major_ starting at **4.0.0**)
39
+
5. Add the package to your target
37
40
38
-
##### Swift Package Manager
39
-
The [Swift Package Manager](https://swift.org/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 Loading Bar does support its use on supported platforms.
41
+
#### Option 2: `Package.swift`
40
42
41
-
Once you have your Swift package set up, adding Gradient Loading Bar as a dependency is as easy as adding it to the `dependencies`value of your `Package.swift`.
43
+
If you manage dependencies manually, add this repository to the `dependencies`section of your `Package.swift`:
Then reference the product in your target configuration:
55
+
56
+
```swift
57
+
.product(
58
+
name: "GradientLoadingBar",
59
+
package: "GradientLoadingBar"
60
+
)
61
+
```
62
+
63
+
Once the package is added, import the framework where needed:
64
+
65
+
```swift
66
+
importGradientLoadingBar
67
+
```
49
68
50
69
### How to use
70
+
51
71
This framework provides four classes:
52
72
53
-
-**GradientLoadingBar**: A controller, managing the visibility of the `GradientActivityIndicatorView` on the current key window.
54
-
-**NotchGradientLoadingBar**: A subclass of `GradientLoadingBar`, wrapping the `GradientActivityIndicatorView` around the notch of the iPhone.
55
-
-**GradientActivityIndicatorView**: A `UIView` containing the gradient with the animation. It can be added as a subview to another view either inside the interface builder or programmatically. Both ways are shown inside the example application.
56
-
-**GradientLoadingBarView**: A `View` for SwiftUI containing the gradient with the animation. The view can be added to any other SwiftUI view. The example application also contains sample code for this use case.
73
+
-**GradientLoadingBar**: A controller, managing the visibility of the `GradientActivityIndicatorView` on the current key window.
74
+
-**NotchGradientLoadingBar**: A subclass of `GradientLoadingBar`, wrapping the `GradientActivityIndicatorView` around the notch of the iPhone.
75
+
-**GradientActivityIndicatorView**: A `UIView` containing the gradient with the animation. It can be added as a subview to another view either inside the interface builder or programmatically. Both ways are shown inside the example application.
76
+
-**GradientLoadingBarView**: A `View` for SwiftUI containing the gradient with the animation. The view can be added to any other SwiftUI view. The example application also contains sample code for this use case.
57
77
58
78
#### GradientLoadingBar
59
-
To get started, import the module `GradientLoadingBar` into your file and save an instance of `GradientLoadingBar()` on a property of your view-controller. To show the loading bar, simply call the `fadeIn(duration:completion)` method and after your async operations have finished call the `fadeOut(duration:completion)` method.
79
+
80
+
To get started, import the module `GradientLoadingBar` into your file and save an instance of `GradientLoadingBar()` on a property of your view-controller. To show the loading bar, simply call the `fadeIn(duration:completion)` method and after your async operations have finished call the `fadeOut(duration:completion)` method.
There is a third option which will wrap the loading bar around the iPhone notch. See documentation of the class `NotchGradientLoadingBar` for further details.
107
131
108
132
##### Properties
133
+
109
134
###### – `gradientColors: [UIColor]`
135
+
110
136
This property adjusts the gradient colors shown on the loading bar.
This property adjusts the duration of the animation moving the gradient from left to right.
114
141
115
142
##### Methods
143
+
116
144
###### – `fadeIn(duration:completion)`
145
+
117
146
This method fades-in the loading bar. You can adjust the duration with corresponding parameter. Furthermore you can pass in a completion handler that gets called once the animation is finished.
118
147
119
148
###### – `fadeOut(duration:completion)`
120
-
This methods fades-out the loading bar. You can adjust the duration with corresponding parameter. Furthermore you can pass in a completion handler that gets called once the animation is finished.
149
+
150
+
This methods fades-out the loading bar. You can adjust the duration with corresponding parameter. Furthermore you can pass in a completion handler that gets called once the animation is finished.
121
151
122
152
##### Custom shared instance (Singleton)
153
+
123
154
If you need the loading bar on multiple / different parts of your app, you can use the given static `shared` variable:
124
155
125
156
```swift
@@ -136,119 +167,121 @@ If you wish to customize the shared instance, you can add the following code e.g
In case you don't want to add the loading bar onto the key-window, this framework provides the `GradientActivityIndicatorView`, which is a direct subclass of `UIView`. You can add the view to another view either inside the interface builder or programmatically.
155
187
156
188
E.g. View added as a subview to a `UINavigationBar`.
The progress-animation starts and stops according to the `isHidden` flag. Setting this flag to `false` will start the animation, setting this to `true` will stop the animation. Often you don't want to directly show / hide the view and instead smoothly fade it in or out. Therefore the view provides the methods `fadeIn(duration:completion)` and `fadeOut(duration:completion)`. Based on the gist [`UIView+AnimateAlpha.swift`](https://gist.github.com/fxm90/723b5def31b46035cd92a641e3b184f6), these methods adjust the `alpha` value of the view and update the `isHidden` flag accordingly.
165
197
166
198
##### Properties
199
+
167
200
###### – `gradientColors: [UIColor]`
201
+
168
202
This property adjusts the gradient colors shown on the loading bar.
This property adjusts the duration of the animation moving the gradient from left to right.
172
205
173
-
*To see all these screenshots 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()`.*
206
+
This property adjusts the duration of the animation moving the gradient from left to right.
174
207
208
+
_To see all these screenshots 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()`._
175
209
176
210
#### GradientLoadingBarView
211
+
177
212
This is the SwiftUI variant for the `GradientActivityIndicatorView`. The view can be configured via the two parameters `gradientColors: [Color]` and `progressDuration: TimeInterval` passed to the initializer.
178
213
179
214
##### – `gradientColors: [Color]` :
215
+
180
216
This parameter adjusts the gradient colors shown on the loading bar.
181
217
182
218
##### – `progressDuration: TimeInterval` :
219
+
183
220
This parameter adjusts the duration of the animation moving the gradient from left to right.
184
221
185
-
The visibility of the view can be updated with the view modifier [`opacity()`](https://developer.apple.com/documentation/swiftui/view/opacity(_:)) or [`hidden()`](https://developer.apple.com/documentation/swiftui/view/hidden()).
222
+
The visibility of the view can be updated with the view modifier [`opacity()`](<https://developer.apple.com/documentation/swiftui/view/opacity(_:)>) or [`hidden()`](<https://developer.apple.com/documentation/swiftui/view/hidden()>).
186
223
187
-
To animate the visibility changes you need to create a property with the `@State` property wrapper, and update the value from a [`withAnimation`](https://developer.apple.com/documentation/swiftui/withanimation(_:_:)) block, e.g.
224
+
To animate the visibility changes you need to create a property with the `@State` property wrapper, and update the value from a [`withAnimation`](<https://developer.apple.com/documentation/swiftui/withanimation(_:_:)>) block, e.g.
188
225
189
226
```swift
190
227
structExampleView: some View {
191
228
192
-
@State
193
-
privatevar isVisible =false
194
-
195
-
var body: some View {
196
-
VStack {
197
-
GradientLoadingBarView()
198
-
.frame(maxWidth: .infinity, maxHeight: 3)
199
-
.cornerRadius(1.5)
200
-
.opacity(isVisible ?1:0)
201
-
202
-
Button("Toggle visibility") {
203
-
withAnimation(.easeInOut) {
204
-
isVisible.toggle()
205
-
}
206
-
}
229
+
@State
230
+
privatevar isVisible =false
231
+
232
+
var body: some View {
233
+
VStack {
234
+
GradientLoadingBarView()
235
+
.frame(maxWidth: .infinity, maxHeight: 3)
236
+
.cornerRadius(1.5)
237
+
.opacity(isVisible ?1:0)
238
+
239
+
Button("Toggle visibility") {
240
+
withAnimation(.easeInOut) {
241
+
isVisible.toggle()
207
242
}
243
+
}
208
244
}
245
+
}
209
246
}
210
247
```
211
248
212
-
213
249
### Troubleshooting
250
+
214
251
#### Interface Builder Support
252
+
215
253
Unfortunately 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 `GradientLoadingBar` inside the Interface Builder :)
216
254
217
255
```
218
256
post_install do |installer|
219
-
installer.pods_project.build_configurations.each do |config|
220
-
next unless config.name == 'Debug'
257
+
installer.pods_project.build_configurations.each do |config|
0 commit comments