{"id":19113850,"url":"https://github.com/fxm90/gradientloadingbar","last_synced_at":"2026-01-31T11:06:16.197Z","repository":{"id":15046309,"uuid":"77480764","full_name":"fxm90/GradientLoadingBar","owner":"fxm90","description":"⌛️A customizable animated gradient loading bar.","archived":false,"fork":false,"pushed_at":"2023-04-23T18:52:30.000Z","size":181044,"stargazers_count":884,"open_issues_count":2,"forks_count":65,"subscribers_count":17,"default_branch":"main","last_synced_at":"2024-05-29T14:18:23.067Z","etag":null,"topics":["cocoapods","gradient","ios","loading-animations","loading-bar","loading-indicator","swift"],"latest_commit_sha":null,"homepage":"https://github.com/fxm90/GradientLoadingBar","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fxm90.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-12-27T20:26:45.000Z","updated_at":"2024-05-22T21:27:22.000Z","dependencies_parsed_at":"2024-01-29T18:06:41.129Z","dependency_job_id":null,"html_url":"https://github.com/fxm90/GradientLoadingBar","commit_stats":{"total_commits":496,"total_committers":9,"mean_commits":"55.111111111111114","dds":"0.44758064516129037","last_synced_commit":"85cd3fe00dd85135ba32d8a6629144c5590430ac"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxm90%2FGradientLoadingBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxm90%2FGradientLoadingBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxm90%2FGradientLoadingBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxm90%2FGradientLoadingBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fxm90","download_url":"https://codeload.github.com/fxm90/GradientLoadingBar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994120,"owners_count":21030050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cocoapods","gradient","ios","loading-animations","loading-bar","loading-indicator","swift"],"created_at":"2024-11-09T04:39:16.992Z","updated_at":"2025-04-09T07:03:51.460Z","avatar_url":"https://github.com/fxm90.png","language":"Swift","readme":"GradientLoadingBar\n====================\n\n![Swift5.0](https://img.shields.io/badge/Swift-5.0-green.svg?style=flat) ![CI Status](https://img.shields.io/github/workflow/status/fxm90/GradientLoadingBar/Continuous%20Integration) ![Code Coverage](https://img.shields.io/codecov/c/github/fxm90/GradientLoadingBar.svg?style=flat) ![Version](https://img.shields.io/cocoapods/v/GradientLoadingBar.svg?style=flat) ![License](https://img.shields.io/cocoapods/l/GradientLoadingBar.svg?style=flat) ![Platform](https://img.shields.io/cocoapods/p/GradientLoadingBar.svg?style=flat)\n\nA customizable animated gradient loading bar. Inspired by [iOS 7 Progress Bar from Codepen](https://codepen.io/marcobiedermann/pen/LExXWW).\n\n### Example\n![Example][example]\n\nTo run the example project, clone the repo, and open the workspace from the Example directory.\n\n### Requirements\n- Swift 5.5\n- Xcode 13\n- iOS 13.0+\n\n**Note:** In case you need support for iOS versions lower than 13, you can fallback to version `2.X.X`.\n\n\n### Integration\n##### CocoaPods\n[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`:\n\n```ruby\npod 'GradientLoadingBar', '~\u003e 3.0'\n```\n\n##### Carthage\n[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`:\n\n```ogdl\ngithub \"fxm90/GradientLoadingBar\" ~\u003e 3.0\n```\nRun carthage update to build the framework and drag the built `GradientLoadingBar.framework` into your Xcode project.\n\n\n##### Swift Package Manager\nThe [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.\n\nOnce 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`.\n\n```swift\ndependencies: [\n    .package(url: \"https://github.com/fxm90/GradientLoadingBar\", from: \"3.0.0\")\n]\n```\n\n\n### How to use\nThis framework provides four classes:\n\n - **GradientLoadingBar**: A controller, managing the visibility of the `GradientActivityIndicatorView` on the current key window.\n - **NotchGradientLoadingBar**: A subclass of `GradientLoadingBar`, wrapping the `GradientActivityIndicatorView` around the notch of the iPhone.\n - **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.\n - **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.\n\n#### GradientLoadingBar\nTo 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.\n\n```swift\nfinal class UserViewController: UIViewController {\n\n    private let gradientLoadingBar = GradientLoadingBar()\n\n    // ...\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n\n        gradientLoadingBar.fadeIn()\n\n        userService.loadUserData { [weak self] _ in\n            // ...\n            // Be sure to call this on the main thread!\n            self?.gradientLoadingBar.fadeOut()\n        }\n    }\n}\n```\n\n##### Configuration\nYou can override the default configuration by calling the initializers with the optional parameters `height` and `isRelativeToSafeArea`:\n\n```swift\nlet gradientLoadingBar = GradientLoadingBar(\n    height: 4.0,\n    isRelativeToSafeArea: true\n)\n```\n\n###### – Parameter `height: CGFloat`\nBy setting this parameter you can set the height for the loading bar (defaults to `3.0`)\n\n###### – Parameter `isRelativeToSafeArea: Bool`\nWith this parameter you can configure, whether the loading bar should be positioned relative to the safe area (defaults to `true`).\n\nExample with `isRelativeToSafeArea` set to `true`.\n[![Example][basic-example--thumbnail]][basic-example]\n\n\nExample with `isRelativeToSafeArea` set to `false`.\n[![Example][safe-area-example--thumbnail]][safe-area-example]\n\n##### Note\nThere is a third option which will wrap the loading bar around the iPhone notch. See documentation of the class `NotchGradientLoadingBar` for further details.\n\n##### Properties\n###### – `gradientColors: [UIColor]`\nThis property adjusts the gradient colors shown on the loading bar.\n\n###### – `progressAnimationDuration: TimeInterval`\nThis property adjusts the duration of the animation moving the gradient from left to right.\n\n##### Methods\n###### – `fadeIn(duration:completion)`\nThis 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.\n\n###### – `fadeOut(duration:completion)`\nThis 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.\n\n##### Custom shared instance (Singleton)\nIf you need the loading bar on multiple / different parts of your app, you can use the given static `shared` variable:\n\n```swift\nGradientLoadingBar.shared.fadeIn()\n\n// Do e.g. server calls etc.\n\nGradientLoadingBar.shared.fadeOut()\n```\n\nIf 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:\n\n```swift\nGradientLoadingBar.shared = GradientLoadingBar(height: 5.0)\n```\n\n\n#### NotchGradientLoadingBar\nThis subclass of the `GradientLoadingBar` will wrap the loading bar around the notch of the iPhone.\n\nFor iPhones without a safe area, the behaviour stays the same as mentioned in the above documentation of the `GradientLoadingBar`.\n\n```swift\nlet notchGradientLoadingBar = NotchGradientLoadingBar(\n    height: 3.0\n)\n```\n\n[![Example][notch-example--thumbnail]][notch-example]\n\n#### GradientActivityIndicatorView\nIn 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.\n\nE.g. View added as a subview to a `UINavigationBar`.\n[![Example][navigation-bar-example--thumbnail]][navigation-bar-example]\n\n\nE.g. View added as a subview to a `UIButton`.\n[![Example][advanced-example--thumbnail]][advanced-example]\n\n##### Note\nThe 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.\n\n##### Properties\n###### – `gradientColors: [UIColor]`\nThis property adjusts the gradient colors shown on the loading bar.\n\n###### – `progressAnimationDuration: TimeInterval`\nThis property adjusts the duration of the animation moving the gradient from left to right.\n\n*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()`.*\n\n\n#### GradientLoadingBarView\nThis 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.\n\n##### – `gradientColors: [Color]` :\nThis parameter adjusts the gradient colors shown on the loading bar.\n\n##### – `progressDuration: TimeInterval` :\nThis parameter adjusts the duration of the animation moving the gradient from left to right.\n\nThe 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()).\n\nTo 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.\n\n```swift\nstruct ExampleView: some View {\n\n    @State\n    private var isVisible = false\n\n    var body: some View {\n        VStack {\n            GradientLoadingBarView()\n                .frame(maxWidth: .infinity, maxHeight: 3)\n                .cornerRadius(1.5)\n                .opacity(isVisible ? 1 : 0)\n\n            Button(\"Toggle visibility\") {\n                withAnimation(.easeInOut) {\n                    isVisible.toggle()\n                }\n            }\n        }\n    }\n}\n```\n\n\n### Troubleshooting\n#### Interface Builder Support\nUnfortunately 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 :)\n\n```\n  post_install do |installer|\n    installer.pods_project.build_configurations.each do |config|\n      next unless config.name == 'Debug'\n\n      config.build_settings['LD_RUNPATH_SEARCH_PATHS'] = [\n        '$(FRAMEWORK_SEARCH_PATHS)'\n      ]\n    end\n  end\n  ```\nSource: [Cocoapods – Issue 7606](https://github.com/CocoaPods/CocoaPods/issues/7606#issuecomment-484294739)\n\n\n### Author\nFelix Mau (me(@)felix.hamburg)\n\n### License\n\nGradientLoadingBar is available under the MIT license. See the LICENSE file for more info.\n\n[example]: Assets/screen.gif\n\n[basic-example]: Assets/basic-example.png\n[basic-example--thumbnail]: Assets/basic-example--thumbnail.png\n\n[safe-area-example]: Assets/safe-area-example.png\n[safe-area-example--thumbnail]: Assets/safe-area-example--thumbnail.png\n\n[notch-example]: Assets/notch-example.png\n[notch-example--thumbnail]: Assets/notch-example--thumbnail.png\n\n[navigation-bar-example]: Assets/navigation-bar-example.png\n[navigation-bar-example--thumbnail]: Assets/navigation-bar-example--thumbnail.png\n\n\n[advanced-example]: Assets/advanced-example.png\n[advanced-example--thumbnail]: Assets/advanced-example--thumbnail.png\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxm90%2Fgradientloadingbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffxm90%2Fgradientloadingbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxm90%2Fgradientloadingbar/lists"}