Syntelex Web Design Blog

Jun19

Improving User Experience Through the Utilization of Loading Animations

Improving User Experience Through the Utilization of Loading Animations

The “Throbber” and It’s Usage

Originally known as a throbber, a loading animation is used to indicate the progress of data recollection or interface rendering.Today, a well-crafted animation leveraging CSS, jQuery, or simple animated GIFs is an opportunity to highlight your interfaces and add personality to your product.

Improving Your User Experience

Thoughtful animations can entertain your users while they wait for content to load. A good loading animation helps manage expectations and improves the user experience by maintaining interest.

Creating Custom Loading Animations

In this tutorial, we’ll use Sketch to create basic shapes and principle to quickly create simple custom loading animations. (Both of these apps are for Mac.) You’ll learn how to create the colorful loading animations used by Trello, Flickr, Slack, and more.

Slack Loading Animation

slack loading animation - Toptal

slack loading animation - Toptal

On Sketch above, simply draw  four squares with 50px sides, or a 100px radius each – make sure they are rounded. Create an imaginary square with 150px of space between each side. Apply four different colors (#35BA90 green, #69CADD blue, #EBA900 yellow, and #E20661 pink).

slack loading animation - Toptal

Import the shapes to Principle, group them, and click “Create Component” to nest the group.

Go inside the nested group and rotate the artboard by 15 degrees. Then select each individual circle and rotate it back to its original position (backward 15 degrees). This creates the stretching effect in a straight line.

Apply an “Auto” trigger to the artboard, and then stretch each rounded rectangle to the opposite side of the artboard to a length of 295px. Give a 75% opacity to each shape on both artboards.

Apply another “Auto” trigger to the second artboard. On the new artboard, reduce each line to its original 50px width, but on the opposite side from its original position.

Link the last artboard to the first with an “Auto” trigger. Click the “Back to Parent” button to preview the end result.

Tip: When you go “Back to Parent,” you can rotate the main group by -30 degrees to look more like Slack. Also, you can change the animation pace inside the “Animate” panel and apply an “Ease Both” effect to smooth out the transitions.


Trello Loading Animation

Using Sketch, trace a 100px blue square. Draw a white rectangle 60px wide by 140px high. Align it with the top left of the previous square with a 30px top and left margin. Duplicate that white rectangle, align it to the right of the square with a 30px right margin, and reduce its height to 70px.

Continue Reading..