iOS Loading Animation Example

This spinning circle loader animation is in JSON format, ready for iOS and Android devices. Shown here is JSON, for the web. The major difference between GIF and JSON is where they can play. Almost every smart device, computer and screen will play a GIF format but JSON takes a specific framework and installation-process to be rendered.

Creation Process:
Created using Adobe Illustrator and Adobe After Effects. Uploaded to this website using the “Lottie” framework. 

iOS and Android Ready: Using Lottie

Loading Animations 101

Here’s another custom loading animation, a bit more intricate than the spinning circle above. But why use a loading animation in the first place? Loading animations serve a few different purposes. For starters, they allow a unique waiting experience as your content and code is loading on the backend of your site or app. They also allow your brand or company to stand out from the competition. This is a great time to showcase your brand colors, creativity and set another touchpoint in your visitor’s memory.

The bulk of the work when going about creating an iOS loading animation is done in after effects. The Lottie framework, by AirBNB (yes that AirBNB), can then be used to import/export animations. Whether you are using  Xcode, Swift, or another iOS development platform you can easily add in your JSON animation. If you don’t know what any of this means, don’t’re developer will 100% know (if they don’t they probably aren’t the right iOS developer).

JSON format is ideal for mobile application and development (iOS and Android). JSON format is an interesting format as it looks like “robot speak” at first glance (a bunch of binary numbers, letters and characters). This is essentially a text file that holds all the data to-be-uploaded to your website or app. When uploaded, the animation appears as a GIF animation but with a clean transparent background.

Start a Conversation...

Looking for something similar or have questions about custom animations?. I’d be glad to chat further about your project or start something similar for you.