Skip to content

Commit b5f5818

Browse files
committed
📝 :: Update documentation
1 parent 1e079f2 commit b5f5818

2 files changed

Lines changed: 348 additions & 254 deletions

File tree

README.md

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
# Gradient Loading Bar
2+
3+
![Swift6.2](https://img.shields.io/badge/Swift-6.2-green.svg?style=flat) ![CI Status](https://img.shields.io/github/actions/workflow/status/fxm90/GradientLoadingBar/continuous-integration.yml?branch=feature/version-4) ![Code Coverage](https://img.shields.io/codecov/c/github/fxm90/GradientLoadingBar.svg?style=flat) ![Version](https://img.shields.io/github/v/release/fxm90/GradientLoadingBar) ![License](https://img.shields.io/github/license/fxm90/GradientLoadingBar?color=333333) ![Platform](https://img.shields.io/badge/platform-iOS-8a8a8a)
4+
5+
A customizable animated gradient loading bar, with full support for **SwiftUI** and **UIKit**.\
6+
Inspired by [iOS 7 Progress Bar on Codepen](https://codepen.io/marcobiedermann/pen/LExXWW).
7+
8+
### Screenshot
9+
10+
![Example][example]
11+
12+
To run the example project, clone this repository and open the project file from the **Example** directory.
13+
14+
## Requirements
15+
16+
- Swift **6.2**
17+
- Xcode **26**
18+
- iOS **26.0+**
19+
20+
### Compatibility Notes
21+
22+
- **iOS < 26.0 / CocoaPods / Carthage support**
23+
Use version **`3.x.x`**
24+
- **iOS < 13.0 support**
25+
Use version **`2.x.x`**
26+
27+
## Installation
28+
29+
### Swift Package Manager
30+
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
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
40+
41+
#### Option 2: `Package.swift`
42+
43+
If you manage dependencies manually, add this repository to the `dependencies` section of your `Package.swift`:
44+
45+
```swift
46+
dependencies: [
47+
.package(
48+
url: "https://github.com/fxm90/GradientLoadingBar",
49+
from: "4.0.0"
50+
)
51+
]
52+
```
53+
54+
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+
import GradientLoadingBar
67+
```
68+
69+
## Overview
70+
71+
This framework provides four classes:
72+
73+
- **[`GradientLoadingBar`](#gradientloadingbar)**\
74+
A controller class, managing the visibility of the `GradientActivityIndicatorView` attached to the current key window.
75+
76+
- **[`NotchGradientLoadingBar`](#notchgradientloadingbar)**\
77+
A subclass of `GradientLoadingBar`, wrapping the `GradientActivityIndicatorView` around the iPhone notch.
78+
79+
- **[`GradientActivityIndicatorView`](#gradientactivityindicatorview)**\
80+
A `UIView` containing the gradient with the animation.
81+
82+
- **[`GradientLoadingBarView`](#gradientloadingbarview)**\
83+
A SwiftUI `View` containing the gradient with the animation.
84+
85+
## GradientLoadingBar
86+
87+
`GradientLoadingBar` is a controller-style object that manages a gradient loading bar attached to the app’s key window.
88+
89+
### Basic Usage
90+
91+
Store an instance as a property (e.g. on your view controller) and control the visibility using `fadeIn()` and `fadeOut()`.
92+
93+
```swift
94+
final class UserProfileViewController: UIViewController {
95+
96+
private let gradientLoadingBar = GradientLoadingBar()
97+
98+
// ...
99+
100+
override func viewDidLoad() {
101+
super.viewDidLoad()
102+
103+
gradientLoadingBar.fadeIn()
104+
105+
userProfileService.fetchUserProfile { [weak self] _ in
106+
// ...
107+
// Be sure to call this on the main actor!
108+
self?.gradientLoadingBar.fadeOut()
109+
}
110+
}
111+
}
112+
```
113+
114+
### Configuration
115+
116+
```swift
117+
let gradientLoadingBar = GradientLoadingBar(
118+
height: 5.0,
119+
isRelativeToSafeArea: false,
120+
)
121+
122+
gradientLoadingBar.gradientColors = [.red, .white, .blue]
123+
gradientLoadingBar.progressAnimationDuration = 4.5
124+
```
125+
126+
#### Parameters
127+
128+
- **`height: CGFloat`**\
129+
Sets the bar height (default: `3.0`)
130+
131+
- **`isRelativeToSafeArea: Bool`**\
132+
Determines whether the bar is positioned relative to the safe area (default: `true`)
133+
134+
| Relative To Safe Area | Ignoring Safe Area |
135+
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
136+
| [![Relative to Safe Area][relative-to-safe-area-thumbnail]][relative-to-safe-area] | [![Ignoring Safe Area][ignoring-safe-area-thumbnail]][ignoring-safe-area] |
137+
138+
**Note:** For a third option — wrapping around the iPhone notch — see `NotchGradientLoadingBar`.
139+
140+
The gradient animation is easier to see in a video of the example application:
141+
142+
<details>
143+
<summary>🎬 Relative To Safe Area</summary>
144+
145+
https://github.com/user-attachments/assets/c8a3a117-c164-49f5-9511-aa29b92b5344
146+
</details>
147+
148+
<details>
149+
<summary>🎬 Ignoring Safe Area</summary>
150+
151+
https://github.com/user-attachments/assets/4abad13d-e019-43b3-b3b3-c874ac8f9224
152+
</details>
153+
154+
#### Properties
155+
156+
- **`gradientColors: [UIColor]`**\
157+
Defines the gradient colors.
158+
159+
- **`progressAnimationDuration: TimeInterval`**\
160+
Controls how fast the gradient animates from left to right.
161+
162+
#### Methods
163+
164+
- **`fadeIn(duration: TimeInterval = 0.33, completion: ((Bool) -> Void)? = nil)`**\
165+
Fades the loading bar in.
166+
167+
- **`fadeOut(duration: TimeInterval = 0.66, completion: ((Bool) -> Void)? = nil)`**\
168+
Fades the loading bar out.
169+
170+
## NotchGradientLoadingBar
171+
172+
`NotchGradientLoadingBar` is a subclass of `GradientLoadingBar` that wraps the bar around the iPhone notch.\
173+
On devices without a notch, it behaves identically to `GradientLoadingBar`.
174+
175+
| iPhone 12 Pro | iPhone 13 Pro Max |
176+
| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
177+
| [![iPhone 12 Pro][notch-iphone-12-pro-thumbnail]][notch-iphone-12-pro] | [![iPhone 13 Pro Max][notch-iphone-13-pro-max-thumbnail]][notch-iphone-13-pro-max] |
178+
179+
The gradient animation is easier to see in a video of the example application:
180+
181+
<details>
182+
<summary>🎬 iPhone 12 Pro</summary>
183+
184+
https://github.com/user-attachments/assets/998fe36c-40c5-4c70-9ce8-e7a7f3f126d8
185+
</details>
186+
187+
<details>
188+
<summary>🎬 iPhone 13 Pro Max</summary>
189+
190+
https://github.com/user-attachments/assets/2ff6d717-07f1-4d70-887e-2727d55f2515
191+
</details>
192+
193+
## GradientActivityIndicatorView
194+
195+
If you prefer direct view composition, `GradientActivityIndicatorView` is a `UIView` subclass that can be added to other views — such as `UINavigationBar`, `UIButton` or a custom container.
196+
197+
### Basic Usage
198+
199+
Store an instance as a property, set-up constraints and control the visibility using `fadeIn()` and `fadeOut()`.
200+
201+
```swift
202+
final class UserProfileViewController: UIViewController {
203+
204+
private let gradientActivityIndicatorView = GradientActivityIndicatorView()
205+
206+
// ...
207+
208+
override func viewDidLoad() {
209+
super.viewDidLoad()
210+
211+
gradientActivityIndicatorView.translatesAutoresizingMaskIntoConstraints = false
212+
view.addSubview(gradientActivityIndicatorView)
213+
214+
NSLayoutConstraint.activate([
215+
gradientActivityIndicatorView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
216+
gradientActivityIndicatorView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
217+
gradientActivityIndicatorView.topAnchor.constraint(equalTo: view.topAnchor),
218+
gradientActivityIndicatorView.heightAnchor.constraint(equalToConstant: 3),
219+
])
220+
221+
gradientActivityIndicatorView.fadeIn()
222+
223+
userProfileService.fetchUserProfile { [weak self] _ in
224+
// ...
225+
// Be sure to call this on the main actor!
226+
self?.gradientActivityIndicatorView.fadeOut()
227+
}
228+
}
229+
}
230+
```
231+
232+
### Configuration
233+
234+
```swift
235+
let gradientActivityIndicatorView = GradientActivityIndicatorView()
236+
gradientActivityIndicatorView.gradientColors = [.red, .white, .blue]
237+
gradientActivityIndicatorView.progressAnimationDuration = 4.5
238+
```
239+
240+
#### Properties
241+
242+
- **`isHidden: Bool`**\
243+
Toggles the view visibility and starts / stops the progress animation accordingly.
244+
245+
- **`gradientColors: [UIColor]`**\
246+
Defines the gradient colors.
247+
248+
- **`progressAnimationDuration: TimeInterval`**\
249+
Controls how fast the gradient animates from left to right.
250+
251+
#### Methods
252+
253+
- **`fadeIn(duration: TimeInterval = 0.33, completion: ((Bool) -> Void)? = nil)`**\
254+
Fades the view in.
255+
256+
- **`fadeOut(duration: TimeInterval = 0.66, completion: ((Bool) -> Void)? = nil)`**\
257+
Fades the view out.
258+
259+
- **`animate(isHidden: Bool, duration: TimeInterval, completion: ((Bool) -> Void)? = nil)`**\
260+
Fades the view in- or out, based on the provided hidden flag.
261+
262+
## GradientLoadingBarView
263+
264+
`GradientLoadingBarView` is the SwiftUI equivalent of `GradientActivityIndicatorView`.
265+
266+
### Basic Usage
267+
268+
```swift
269+
struct ContentView: some View {
270+
271+
var body: some View {
272+
GradientLoadingBarView()
273+
.frame(maxWidth: .infinity, maxHeight: 3)
274+
.cornerRadius(1.5)
275+
}
276+
}
277+
```
278+
279+
### Configuration
280+
281+
```swift
282+
GradientLoadingBarView(
283+
gradientColors: [.red, .white, .blue],
284+
progressDuration: 4.5,
285+
)
286+
```
287+
288+
#### Parameters
289+
290+
- **`gradientColors: [Color]`**\
291+
Defines the gradient colors.
292+
293+
- **`progressDuration: TimeInterval`**\
294+
Sets the animation speed.
295+
296+
### Visibility & Animation
297+
298+
Control the visibility using standard SwiftUI view modifiers such as:
299+
300+
- [`opacity(_:)`](<https://developer.apple.com/documentation/swiftui/view/opacity(_:)>)
301+
- [`hidden()`](<https://developer.apple.com/documentation/swiftui/view/hidden()>)
302+
303+
Example with fade animation:
304+
305+
```swift
306+
struct ContentView: some View {
307+
308+
@State
309+
private var isVisible = false
310+
311+
var body: some View {
312+
VStack {
313+
GradientLoadingBarView()
314+
.frame(maxWidth: .infinity, maxHeight: 3)
315+
.cornerRadius(1.5)
316+
.opacity(isVisible ? 1 : 0)
317+
.animation(.easeInOut, value: isVisible)
318+
319+
Button("Toggle visibility") {
320+
isVisible.toggle()
321+
}
322+
}
323+
}
324+
}
325+
```
326+
327+
## Author
328+
329+
Felix Mau
330+
me(@)felix.hamburg
331+
332+
## License
333+
334+
Gradient Loading Bar is released under the **MIT License**. See the `LICENSE` file for details.
335+
336+
[example]: Assets/screen.gif
337+
[ignoring-safe-area]: Assets/ignoring-safe-area.png
338+
[ignoring-safe-area-thumbnail]: Assets/ignoring-safe-area-thumbnail.png
339+
[ignoring-safe-area-animation]: Assets/ignoring-safe-area.mov
340+
[relative-to-safe-area]: Assets/relative-to-safe-area.png
341+
[relative-to-safe-area-thumbnail]: Assets/relative-to-safe-area-thumbnail.png
342+
[relative-to-safe-area-animation]: Assets/relative-to-safe-area.mov
343+
[notch-iphone-12-pro]: Assets/notch-iphone-12-pro.png
344+
[notch-iphone-12-pro-thumbnail]: Assets/notch-iphone-12-pro-thumbnail.png
345+
[notch-iphone-12-pro-animation]: Assets/notch-iphone-12-pro.mov
346+
[notch-iphone-13-pro-max]: Assets/notch-iphone-13-pro-max.png
347+
[notch-iphone-13-pro-max-thumbnail]: Assets/notch-iphone-13-pro-max-thumbnail.png
348+
[notch-iphone-13-pro-max-animation]: Assets/notch-iphone-13-pro-max.mov

0 commit comments

Comments
 (0)