A loading animation, also commonly referred to as a throbber, is utilised to indicate the progress of data collection or interface rendering. This has become a more popular choice than the traditional progress metre as it provides a more engaging experience for the user.
Nowadays, creating an engaging animation that uses modern technologies such as Cascading Style Sheets (CSS), jQuery, or even simple animated GIFs can help to bring life to your user interfaces and add a unique character to your product.
Adding thoughtful animations to your website can not only entertain the users while they wait for the content to load, but it can also help manage their expectations and improve the overall user experience. By providing a visually stimulating experience, users will remain engaged and attentive while waiting for the content to finish loading. In the end, this will help to create a more pleasant and enjoyable experience for the user.
In this tutorial, we will be utilising Sketch and Principle, two macOS-exclusive applications, to create dynamic and visually captivating loading animations akin to those seen on popular websites such as Trello, Flickr, and Slack. We will begin by utilising Sketch to generate basic shapes, and then move on to utilising Principle to rapidly construct simple custom loading animations.
Okay, so let’s get to work.
Slow-Motion Cartoon
Using Sketch, create four squares with a side length of 50 pixels. Though they should have a circular shape, the animation’s line stretching effect requires that they have rounded corners. Therefore, each square should have a radius of 100 pixels.
Organise the four figures so as to form a square with a 150px margin on all sides. The figures should be coloured using the following shades: green (#35BA90), blue (#69CADD), yellow (#EBA900), and pink (#E20661).
To create a nested component, import the shapes into Principle, group them, and then choose “Create Component.”
To achieve the desired effect, enter the nested group and rotate the artboard by 15 degrees. Afterwards, manually reposition each circle by rotating the circles you have selected counterclockwise by 15 degrees. This will create a stretching effect in a straight line.
For each rounded rectangle, it is necessary to stretch its length to 295 pixels. Furthermore, the artboard should be adjusted to the “Auto” trigger. Additionally, the transparency of all forms on both artboards should be reduced to 75%.
A second “Auto” trigger should be used on the second artboard. Resize the new artboard such that each line is 50px wide, but on the other side.
It is recommended to utilise the “Auto” trigger to establish a connection between the final artboard and the initial one. To gain an overview of the finished product before saving it, select the “Back to Parent” option.
If you click the “Back to Parent” option, you can rotate the primary group by -30 degrees, creating a horizontal bar similar to Slack’s signature bar. In addition to the “Ease Both” effect, which can be used to make the animation flow more smoothly, the tempo can be adjusted via the “Animate” panel.
Animation of Trello loading
Using the Sketch application, draw a blue square with a side length of 100 pixels. Then, draw a white rectangle measuring 60 pixels by 140 pixels and set a 30-pixel margin from both the top and left edges, with the rectangle aligned with the top left corner of the square. After creating the first rectangle, make a copy of it and position the copy 30 pixels to the right of the square and 70 pixels in height.
In accordance with the instructions, load the artboard and utilise the “Auto” trigger to generate a new keyframe. Subsequently, modify the heights of the two white rectangles found on the new artboard – the left rectangle should be set to 70px, while the right rectangle should be set to 140px. To ensure a smooth transition for the viewer, apply the “Ease-Both” effect from the “Animate” panel.
Circular Motion
Create a circular shape on Sketch with a dashed border that is 10 pixels in width and has no fill colour. To bring out the rotating effect, you can use an angular gradient colour on the border.
Launch Principle, and then import the circle from Sketch by clicking the “Import” button. Use a sequence of two “Auto” triggers.
If you would like to achieve the effect of an infinite rotation, the “Angle” value for the circle on the central artboard should be set to 360 degrees. Then, in the left panel, select the third circle and rename it something other than its original name (e.g. “copy”). This can be used to give the illusion of a continuous rotation.
Finally, create another “Auto” trigger to link the third artboard back to the first. Adjust the transition between artboards 1 and 2 to a “Linear” transition. Once you have completed this, check to see if the animation you have just created is working as expected in the preview pane.
Flickr Loading Animation
Create a new artboard in Principle by using the “Auto” trigger and draw two concentric circles side by side. The outer circle should be coloured in blue, while the inner circle should be pink.
Create a third artboard by rearranging the circles and adding a new “Auto” trigger. To accomplish this, switch the placements of the circles and adjust the order of the layers on the left panel of the new artboard.
In order to create a fourth canvas, select an “Auto” trigger for the third artboard. Then, apply the same “Auto” trigger from the last artboard to the first artboard, reversing the placement of the circles each time.
Loading Type
To begin a new project in Principle, use the text tool to create a label that reads “LOADING” and place it on the artboard. Ensure the text is vertically centred and aligned to the left side of the board.
Five times in a row, use the “Auto” setting as a trigger. Let the fifth panel trigger go back to the first panel, and so on.
Beginning with the initial artboard and progressing to the right, make modifications to the text on each artboard by inserting a period prior to the existing “LOADING” text and then again after zero, one, two, three, two, and one artboards. This can be used as a reference to ensure the correct order of your artboards.
LOADING LOADING. HOLD ON, HOLD ON, WE’RE LOADING In other words, please be patient while we load.
You may now see a preview of your newly made animation.
Pulsating Dots
Instructions to draw two dots onto an artboard, with a separation of sixty pixels, can be accomplished by positioning a single dot on the artboard and then duplicating it sixty pixels to the right. Once the two dots have been placed, they should be centred on the artboard. To complete this task, begin by drawing a single dot on the artboard that has a radius of sixty pixels. Then, copy and paste the dot sixty pixels to the right of the original dot. Finally, centre both dots, along with the sixty-pixel separation, on the artboard.
Four times in a row, use the “Auto” setting as a trigger.
To do this, on the second artboard, we will lower the size of the second dot to 30px.
The first dot on the third layout has to be shrunk to 30px from its current position, and the second one needs to be shrunk to zero.
The first dot should be shrunk to a size of 0px on the fourth artboard, while the second should be enlarged to 30px.
Reduce the size of the first dot on the fifth artboard to 30px and connect it to the first artboard using a “Auto” trigger.
Rolling Dots
Put five dots in a configuration similar to a six-sided die. Centre it in Principle after importing the artboard.
Animating Dots in Rolling Motion using Principle
Set the artboard to “Auto” mode.
Move the cluster of dots to a fresh canvas and rotate it through 360 degrees.
You may do this by using a “Auto” trigger to connect the second artboard to the first.
Pulsating Circle
To get started, draw a circle 150px in diameter with a 5px border and no fill in the middle of which will sit a smaller circle 50px in diameter.
Send three consecutive “Auto” triggers.
Reduce the outer circle’s size to 50px on the first artboard, and the size of the inner circle to 10px.
Request: Please increase the size of the circle in the line art to 200px for the third artboard and reduce its opacity to zero. To view the inner circle, kindly increase its size to 150px and reduce its opacity to 50%.
For the final layout, increase the size of the inner circle to two hundred pixels and reduce its opacity to zero percent. The circle of lines should be reduced in size to fifty pixels and its transparency should be decreased to twenty-five percent.
To the very last artboard, add a “Auto” trigger. Make the inner circle 10px in diameter and 50% opaque.
Attach a “Auto” trigger from the very last artboard all the way back to the very first one.
Jumping Dots
Arrange three identical 50px-high circles with a 50px gap between them.
Use the “Auto” button to initiate anything. The first circle should be moved up the second artboard by 50px.
It is recommended that the user take advantage of the automated features available for the second board by selecting the first two circles on the third artboard and adjusting their position by raising them 50 pixels vertically. This should ensure that the three circles form a diagonal alignment.
It is recommended that the third circuit board be equipped with an “Auto” switch. Additionally, the top circle on the fourth canvas should be adjusted by a distance of 50 pixels downwards. Finally, the two bottom circles should be clicked on and then dragged upwards by a distance of 50 pixels.
The Auto switch on Board Number Four should be activated. The first two circles on the fifth artboard should be reduced by 50 pixels, and the final ring should be shifted upwards by 50 pixels.
Put the fifth circuit board into automatic operation. The last two circles on the sixth artboard need to be shifted down 50px.
Now, on the first artboard, shift the top dot upwards by 50 pixels and use an “Auto” trigger to link it to the final artboard. Once the task is completed, you can preview the final product.
Old-school loader
Start by drawing a circle in Sketch and giving it a 20px grey border with no fill.
Make a duplicate of the circle, then paste it on top, changing the fill colour of the copy to something else. Let’s use blue as an example.
Draw a square that overlaps the blue circle by a quarter of its circumference. Place the rectangle layer underneath the circular layer and use the “Mask” command to mask the square within the circle.
Proceed to Principle and use its “Import” option to bring the Sketch file across.
In the first artboard, use the “Auto” trigger to spin the blue circle through a full circle.
It is recommended to add an additional “Auto” trigger to the second canvas in order to create a connection between the second canvas and the original artboard. Additionally, the name of the third circle layer should be changed to “copy,” and then an “Auto” trigger should be used to link it to the original artboard.
Conclusion
Once you have had the opportunity to create a few of these dependable loading animations, you should be confident that you can design an animation that is special and tailored to your own applications. You should be able to do this with the knowledge and skills that you have gained in this tutorial.
With a bit of creativity and the tools provided by Sketch and Principle, it is possible to create a custom loading animation that seamlessly fits with the aesthetic of your app in a matter of minutes. Not only will this give your app a refined and polished look, but it will also provide users with a helpful indication of how far along the process they are.
