{"id":13672662,"url":"https://github.com/createwithflow/ActivityIndicatorView","last_synced_at":"2025-04-27T22:32:34.665Z","repository":{"id":217579817,"uuid":"305959942","full_name":"createwithflow/ActivityIndicatorView","owner":"createwithflow","description":"50 Custom iOS Activity Indicators. Free for you to use. Subclasses of native UIActivityIndicatorView.","archived":false,"fork":false,"pushed_at":"2021-01-16T00:35:32.000Z","size":2874,"stargazers_count":38,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-24T08:17:40.954Z","etag":null,"topics":["activityindicator","activityindicatorview","animation","dribbble","flow","loaders","loaderspack","ship","spinner","swift","uianimation"],"latest_commit_sha":null,"homepage":"https://createwithflow.com","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/createwithflow.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-21T08:36:05.000Z","updated_at":"2025-03-11T06:59:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"71d385c5-010d-48bd-bca8-23361f637df3","html_url":"https://github.com/createwithflow/ActivityIndicatorView","commit_stats":null,"previous_names":["createwithflow/activityindicatorview"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createwithflow%2FActivityIndicatorView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createwithflow%2FActivityIndicatorView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createwithflow%2FActivityIndicatorView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/createwithflow%2FActivityIndicatorView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/createwithflow","download_url":"https://codeload.github.com/createwithflow/ActivityIndicatorView/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251219601,"owners_count":21554444,"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":["activityindicator","activityindicatorview","animation","dribbble","flow","loaders","loaderspack","ship","spinner","swift","uianimation"],"created_at":"2024-08-02T09:01:43.402Z","updated_at":"2025-04-27T22:32:34.654Z","avatar_url":"https://github.com/createwithflow.png","language":"Swift","readme":"\u003cimg src=\"https://github.com/createwithflow/ActivityIndicatorView/blob/main/Assets/flow-logo%402x.png\" width=\"120\" /\u003e\n\n# ActivityIndicatorView\n\u003cimg align=\"right\" src=\"https://github.com/createwithflow/ActivityIndicatorView/blob/main/Assets/demo.gif\" width=\"320\" /\u003e\n\n#### A set of 50 awesome loading indicators, \u003cu\u003eFREE to use.\u003c/u\u003e\u003cbr /\u003e\n#### Written in pure Swift, using Core Animation.\u003cbr /\u003e\n#### Made with [Flow](https://createwithflow.com/?utm_source=github\u0026utm_medium=activityindicatorview).\u003cbr /\u003e\n\n# Story\n**We created and shipped all 50 of these animations in 48 hours**. We drew on [inspirations from Dribbble](https://createwithflow.com/blog/steal-to-learn/?utm_source=github\u0026utm_medium=activityindicatorview), most designs were created in Sketch or Figma, and some were rolled from scratch in Flow. All code was exported using the `Custom iOS Activity Indicator` option in [Flow](https://createwithflow.com/?utm_source=github\u0026utm_medium=activityindicatorview).\n\nWant to know how we did this so quickly? Check out our article: [Animate and Ship 50 iOS Spinners in 48 hours](https://createwithflow.com/blog/fifty-fortyeight/?utm_source=github\u0026utm_medium=activityindicatorview)\n\n# Usage\nEach class has its own unique initializer. For example:\n\n```\nGriddyActivityIndicatorView(frame: frame)\n```\n\nYou can also use our convience class, like so:\n\n```\nActivityIndicators.create(.griddy)\n```\n\n# Structure\nWe offer a common, basic subclass of `UIActivityIndicatorView`.\n\n```\nActivityIndicatorView: UIActivityIndicatorView {\n  ...\n}\n```\n\nThis basic handles the construction of the activity view, provides the space for common styling additions, and syncs playback with native activity indicator methods.\n\n## Custom Subclasses\nEach indicator is a subclass of `ActivityIndicatorView`.\n\n```\nGriddyActivityIndicatorView: ActivityIndicatorView {\n  ...\n}\n```\n\n# Native Animation Code\nAnimations are written in Swift. They require a few lightweight classes that can be found in [FlowCommoniOS](https://github.com/createwithflow/FlowCommoniOS).\n\nOur animations take full advantage of native Core Animation, most prominently `CAKeyFrameAnimation`.\n\nHere is a sample of our animation code:\n\n```\nlet strokeEndAnimation: CAKeyframeAnimation = {\n    let keyframeAnimation = CAKeyframeAnimation()\n    keyframeAnimation.keyPath = \"strokeEnd\"\n    keyframeAnimation.values = [0.16, 0.99]\n    keyframeAnimation.keyTimes = [0, 1] \n    keyframeAnimation.timingFunctions = [.easeInEaseOut]\n    keyframeAnimation.duration = duration\n    return keyframeAnimation\n}()\n```\n\n# Installation\nWhen we ship a cocoapod for this project, we'll update the instructions here.\n\nFor now, please download and install manually. \n\n1. Download the project.\n2. Install FlowCommon into your project (copy the files in this repo, or install via [FlowCommoniOS](https://github.com/createwithflow/FlowCommoniOS)).\n3. Copy `ActivityIndicatorView.flow`\n4. For each indicator your want to use, copy three files into your project:\n\n```\n\u003cAnimation\u003eActivityIndicatorView.swift\n\u003cAnimation\u003eTimeline.swift\n\u003cAnimation\u003eView.swift\n```\n\nFor example, if you wanted to use the Griddy spinner, you would copy:\n\n```\nGriddyActivityIndicatorView.swift\nGriddyTimeline.swift\nGriddyView.swift\n```\n\n# Types \u0026 Shots\nWe love Dribbble and a lot of the animations in this project were originally inspired by other people's great work, which we riffed on and added our own flair and rebounded with links to the original post and designer. Each indicator is posted to [Flow's Official Dribbble Account](https://dribbble.com/createwithflow), and in the writeup for each shot we've referenced the original, and the maker. \n\nOver the next 25 days we're posting all 50 animations / indicators and will add a link below as the shots go live.\n\nBelow is the list of all 50, and the names are identical to the `enum` cases in the project.\n\n| type name | shot |\n|---|---|\n| `barista` | [Barista](https://dribbble.com/shots/14447030-Barista) |\n| `breathe` | [Breathe](https://dribbble.com/shots/14447107-Breathe) |\n| `caught` | [Caught](https://dribbble.com/shots/14442888-Caught) |\n| `charting` | [Charting](https://dribbble.com/shots/14447038-Charting) |\n| `compass` | [Compass](https://dribbble.com/shots/14446822-Compass) |\n| `cradle` | [Cradle](https://dribbble.com/shots/14433554-Cradle) |\n| `dashed` | [Dashed](https://dribbble.com/shots/14433633-Dashed) |\n| `deceptive` | [Deceptive](https://dribbble.com/shots/14447135-Deceptive) |\n| `dialed` | [Dialed](https://dribbble.com/shots/14447168-Dialed) |\n| `differences` | [Differences](https://dribbble.com/shots/14442910-Differences) |\n| `dottingAroundCircle` | [Dotting Around - Circle](https://dribbble.com/shots/14418568-Dotting-Around-Circle) |\n| `dottingAroundSquare` | [Dotting Around - Square](https://dribbble.com/shots/14418857-Dotting-Around-Square) |\n| `dottingAroundTriangle` | [Dotting Around - Triangle](https://dribbble.com/shots/14419096-Dotting-Around-Triangle) |\n| `doubleTime` | [Double Time](https://dribbble.com/shots/14446438-Double-Time) |\n| `fire` | [Fire](https://dribbble.com/shots/14447099-Fire) |\n| `flowWheel` | [Flow Wheel](https://dribbble.com/shots/14442597-FlowWheel) |\n| `gradientRing` | [Gradient Ring](https://dribbble.com/shots/14446678-Gradient-Ring) |\n| `griddy` | [Griddy](https://dribbble.com/shots/14447156-Griddy) |\n| `gridlock` | [Gridlock](https://dribbble.com/shots/14442786-Gridlock) |\n| `hal` | [Hal](https://dribbble.com/shots/14446216-Hal) |\n| `hexa` | [Hexa](https://dribbble.com/shots/14446664-Hexa) |\n| `hicks` | [Hicks](https://dribbble.com/shots/14446481-Hicks) |\n| `infinity` | [Infinity](https://dribbble.com/shots/14446324-Infinity) |\n| `magician` | [Magician](https://dribbble.com/shots/14446188-Magician) |\n| `mountains` | [Mountains](https://dribbble.com/shots/14442693-Mountains) |\n| `moveAlong` | [Move Along](https://dribbble.com/shots/14446340-Move-Along) |\n| `nonover` | [Nonover](https://dribbble.com/shots/14426280-Nonover) |\n| `overlapping` | [Overlapping](https://dribbble.com/shots/14426206-Overlapping) |\n| `penta` | [Penta](https://dribbble.com/shots/14442760-Penta) |\n| `quarbit` | [Quarbit](https://dribbble.com/shots/14446292-Quarbit) |\n| `queued` | [Queued](https://dribbble.com/shots/14446172-Queued) |\n| `rainbow` | [Rainbow](https://dribbble.com/shots/14446305-Rainbow) |\n| `reflect` | [Reflect](https://dribbble.com/shots/14442962-Reflect) |\n| `ripley` | [Ripley](https://dribbble.com/shots/14442939-Ripley) |\n| `ringItIn` | [Ring It In](https://dribbble.com/shots/14447094-Ring-It-In) |\n| `roulette` | [Roulette](https://dribbble.com/shots/14446801-Roulette) |\n| `shiftDrift` | [Shift'n'Drift](https://dribbble.com/shots/14442650-Shift-n-Drift) |\n| `shkwv` | [Shkwv](https://dribbble.com/shots/14446254-Shkwv) |\n| `showingUp` | [Showing Up](https://dribbble.com/shots/14446466-Showing-Up) |\n| `skeu` | [Skeu](https://dribbble.com/shots/14446891-Skeu) |\n| `spinUp` | [Spin Up](https://dribbble.com/shots/14433455-Spin-Up) |\n| `spindle` | [Spindle](https://dribbble.com/shots/14442720-Spindle) |\n| `spinning` | [Spinning](https://dribbble.com/shots/14446235-Spinning) |\n| `splayed` | [Splayed](https://dribbble.com/shots/14447119-Splayed) |\n| `standby` | [Stand By](https://dribbble.com/shots/14446268-Stand-By) |\n| `stretchAround` | [Stretch Around](https://dribbble.com/shots/14419134-Stretch-Around) |\n| `squareUp` | [Shape Up](https://dribbble.com/shots/14433531-Shape-Up) |\n| `triplex` | [Triplex](https://dribbble.com/shots/14446658-Triplex) |\n| `tumble` | [Tumble](https://dribbble.com/shots/14447164-Tumble) |\n| `xact` | [Xact](https://dribbble.com/shots/14446577-Xact) |\n","funding_links":[],"categories":["Swift"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreatewithflow%2FActivityIndicatorView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreatewithflow%2FActivityIndicatorView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreatewithflow%2FActivityIndicatorView/lists"}