{"id":2266,"url":"https://github.com/polqf/FillableLoaders","last_synced_at":"2025-08-02T23:32:52.673Z","repository":{"id":40614117,"uuid":"40087979","full_name":"polqf/FillableLoaders","owner":"polqf","description":"Completely customizable progress based loaders drawn using custom CGPaths written in Swift","archived":false,"fork":false,"pushed_at":"2019-09-25T08:45:14.000Z","size":2664,"stargazers_count":2113,"open_issues_count":5,"forks_count":164,"subscribers_count":43,"default_branch":"master","last_synced_at":"2024-10-29T17:40:45.345Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cocoapods.org/pods/FillableLoaders","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/polqf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-02T18:01:17.000Z","updated_at":"2024-10-07T01:20:48.000Z","dependencies_parsed_at":"2022-07-31T23:48:37.008Z","dependency_job_id":null,"html_url":"https://github.com/polqf/FillableLoaders","commit_stats":null,"previous_names":["poolqf/fillableloaders"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polqf%2FFillableLoaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polqf%2FFillableLoaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polqf%2FFillableLoaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polqf%2FFillableLoaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polqf","download_url":"https://codeload.github.com/polqf/FillableLoaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228503171,"owners_count":17930527,"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":[],"created_at":"2024-01-05T20:16:09.319Z","updated_at":"2024-12-06T17:30:58.380Z","avatar_url":"https://github.com/polqf.png","language":"Swift","funding_links":[],"categories":["UI","Swift","Content"],"sub_categories":["Activity Indicator","Other free courses","Progress Indicator"],"readme":"![](https://img.shields.io/badge/language-swift-blue.svg)\n![](https://img.shields.io/badge/version-1.3.0-red.svg)\n[![Carthage compatible](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage)\n# FillableLoaders\n\n#### Completely customizable progress based loaders drawn using custom `CGPath`s written in Swift\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"Images/waves.gif\" height=\"120px\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nWaves\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"Images/plain.gif\" height=\"120px\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nPlain\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"Images/spike.gif\" height=\"120px\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nSpike\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"Images/rounded.gif\" height=\"120px\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nRounded\n\u003c/p\u003e\n\n\n### Demo:\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"Images/progress.gif\" height=\"200px\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"Images/demo.png\" height=\"300px\"/\u003e\n\u003c/p\u003e\n\n### Changelog:\n- __1.3.0__ (24 Sep 2016)\n\t- Swift 3.0\n- __1.2.6__ (8 Apr 2016)\n\t- Fixing issue with width assert \n\t- Adapted to Swift 2.2\n- __1.2.5__ (11 Dec 2015)\n\t- Precompiled framework using Xcode 7.2\n- __1.2.4__ (28 Oct 2015)\n\t- Fixing issue when showing loader after removing it\n- __1.2.2__ (27 Oct 2015)\n\t- Precompiled framework using Xcode 7.1\n- __1.2.1__ (25 Oct 2015)\n\t- Added the possibility to add a loader to a desired UIView\n\t- Updated to Swift 2.0 \n- __1.1.1__ (2 Sep 2015)\n\t- Added Carthage Support\n\t- Added animation when hidding loader \n- __1.0.1__ (17 Aug 2015)\n\t- Removed unused code\n- __1.0.0__ (7 Aug 2015)\n\t- Progress based loaders :tada:\n\t- Added documentation to all the public properties and functions\n- __0.0.2 Initial Release__ (3 Aug 2015)\n\n\n### Quick Start:\n#### - Progress based behaviour\nTherea are only 2 necessary things to make the progress based loader work:\n\n- Create the loader using `showProgressBasedLoaderWithPath(path:)` or  `createProgressBasedLoaderWithPath(path:)`\n- To update the fill progress, update the `progress` property of the loader, which goes from `0.0` to `1.0`\n\n#### - Creation\nThere are four main methods to create the loaders:\n\n`showProgressBasedLoaderWithPath(path:)`, `createProgressBasedLoaderWithPath(path:)`,`showLoaderWithPath(path:)` and `createLoaderWithPath(path:)`\n\n`showLoaderWithPath(path:)` or `showProgressBasedLoaderWithPath(path:)` are going to call the create one, and after it, are going to call the `showLoader()` method.\n\nSo, it is just a helper method to do everything at once.\n\nIf you want to create the loader, and not show it at the same moment, you can use `createProgressBasedLoaderWithPath(path:)` or `createLoaderWithPath(path:)` to create it, and when you want to show it, just call `showLoader()`\n\nSample code:\n\n``` swift\n//PROGRESS BASED:\n\t\t\nvar loader = WavesLoader.createProgressBasedLoaderWithPath(path)\nloader.loaderColor = UIColor.redColor()\n        ...\n//Do other stuff\n        ...\nloader.showLoader()\n\t\t\n//BASIC\n\nvar loader = WavesLoader.createLoaderWithPath(path)\nloader.loaderColor = UIColor.redColor()\n        ...\n//Do other stuff\n        ...\nloader.showLoader()\n```\n\n#### - Showing loader in desired view:\nAll the methods wave the variant version where you can pass it the view in which you want to add the loader:\n\n- `showProgressBasedLoaderWithPath(path:onView:)`\n- `createProgressBasedLoaderWithPath(path:onView:)`\n- `showLoaderWithPath(path:onView:)`\n- `createLoaderWithPath(path:onView:)`\n\n\n#### - Deletion:\nJust call the method `removeLoader()` and the loader will disappear and will also be removed from its superview.\n\nSample code:\n\n``` swift\nloader.removeLoader()\n```\n\n### Customization:\n\nApart from being able to customize the loader shape, you can also customize other properties of the loader. Take a look at the list:\n\n- __progressBased__: Bool\t\nIndicates if the loader movement is progress based or not (Default: false)\n- __progress__: CGFloat\t\t\nLoader fill progress from 0.0 to 1.0 . It will automatically fire an animation to update the loader fill progress\n- __backgroundColor__: UIColor?         \nBackground of the loader view (transparent by default)\n- __loaderColor__: UIColor?             \nColor of the filled loader\n- __loaderBackgroundColor__: UIColor?   \nColor of the unfilled loader\n- __loaderStrokeColor__: UIColor?       \nColor of the path stroke\n- __loaderStrokeWidth__: CGFloat        \nWidth of the path stroke\n- __loaderAlpha__: CGFloat              \nAlpha of the loader view (1.0 by default)\n- __cornerRadius__: CGFloat             \nCorner radius of the loader view (0.0 by default)\n- __duration__: NSTimeInterval          \nDuration of the animations (10.0 by default)\n- __rectSize__: CGFloat                 \nHeight of the loader view\n- __swing__: Bool                       \nBool to indicate if the loader has to swing when going up (small rotation, not available for the Plain loader)\n\n\n##### Extra property for `Spikes` and `Rounded` loaders:\n\n- __-spikeHeight__: CGFloat\t\t\nHeight of the spike\n\n\n### Installation:\n#### • CocoaPods\n\n```\nuse_frameworks!\n\npod 'FillableLoaders', '~\u003e1.3.0'\n```\n#### • Carthage\n\n```\ngithub \"poolqf/FillableLoaders\" ~\u003e \"1.3.0\"\n```\n#### • Manually\n\nTo manually add `FillableLoaders` to your project you just need to copy the `Source` folder files.\n\n### How to create my own CGPath?\n\n###### :warning: The CGPath bounds cannot exceed the bounds of the loaderView:\n- Width: Screen width\n- Height: rectSize property\n\n#### • Manually\n\n``` swift\nlet path = CGPathCreateMutable()\nCGPathMoveToPoint(path, nil, 0, height/2)\nCGPathAddLineToPoint(path, nil, width + 100, height/2)\nCGPathAddLineToPoint(path, nil, width + 100, height*2)\nCGPathAddLineToPoint(path, nil, 0, height*2)\nCGPathCloseSubpath(path)\nreturn path\n```\n\n#### • PaintCode\n\n__[PaintCode](http://www.paintcodeapp.com)__ is a realy powerful Mac app that can do a lot of things. \nYou can just draw things, and it will __automagically__ create the code for you\n\nIn this case we can use it to create BezierPaths, and extract from there the CGPath.\n\nIn the case of drawing a star, it is going to give us this code:\n\n``` swift\n//// Star Drawing\nvar starPath = UIBezierPath()\nstarPath.moveToPoint(CGPointMake(180, 25))\nstarPath.addLineToPoint(CGPointMake(195.16, 43.53))\nstarPath.addLineToPoint(CGPointMake(220.9, 49.88))\nstarPath.addLineToPoint(CGPointMake(204.54, 67.67))\nstarPath.addLineToPoint(CGPointMake(205.27, 90.12))\nstarPath.addLineToPoint(CGPointMake(180, 82.6))\nstarPath.addLineToPoint(CGPointMake(154.73, 90.12))\nstarPath.addLineToPoint(CGPointMake(155.46, 67.67))\nstarPath.addLineToPoint(CGPointMake(139.1, 49.88))\nstarPath.addLineToPoint(CGPointMake(164.84, 43.53))\nstarPath.closePath()\nUIColor.grayColor().setFill()\nstarPath.fill()\n\n```\n\nThe only thing we have to do here is extract the CGPath from the UIBezierPath like so:\n\n``` swift\nlet myPath = starPath.CGPath\nvar myLoader = WavesLoader.showProgressBasedLoaderWithPath(myPath)\n```\n\n#### • SVG + PaintCode\n\nA feature that I `LOVE` from PaintCode is that you can import an .svg file, and it is going to create the code to create its BezierPath. Completely awesome.\n\nThat's how I did the Github and Twitter logos, for example.\n\n### Technical details:\n- Swift 3.0\n- Animations using CAKeyFrameAnimation\n\n### Licenses\nAll source code is licensed under the MIT License.\n\nIf you use it, i'll be happy to know about it.\n\n### Pol Quintana - [@poolqf](https://twitter.com/poolqf)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolqf%2FFillableLoaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolqf%2FFillableLoaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolqf%2FFillableLoaders/lists"}