Loading states are an inevitable part of any kind of service or product. A loading animation lets users know that the back-end is working on the next steps of whatever process it was tasked with. This visual feedback is important to maintain a sense of urgency and patience with the user experience.
Lightwell makes it easier than ever to make custom animations that are fun and engaging. In this article we will go over how to make 3 different kinds of loading animation. Download the sample projects below to try them for yourself.
1. Progress Bar Animation
Add a touch of pride to your loading states
Simply select the rainbow line inside the progress bar container and move its position right to left. The Rainbow Line is inside a masked layer and moves side to side within 3 different keyframe times. They are set to autoreverse with ease in and out timing curves in the first and last keyframe to give it a smooth start and finish.
2. Looped Animation
A.I. Loading Dots
Ever get tired of seeing the same spinner dots? Here's a set of circles and dots that have been animated with ambient motion and individual scale, rotation, and position animations on each circle. The combination of both ambient motion plus action animations can lead to complex loops that can hook you forever.
3. Logo Animation
When users are hungry, their patience is lower than ever. Here's a sample animation using position animations on each layer of the logo on the burger. With autoreverse, Scale, and Opacity on the logo and background, we can create a dynamic and smooth transition.