How to Animate Stroke Loaders

In this tutorial, you can learn how to create a 1.5-second looping stroke loader animation.

Step 1 - Set Up the Canvas

Start a new project and set the canvas size to 2100 x 2100 pixels. Set the background color to a dark gray. Add a 1740 x 1740 pixel square as a margin guide in the center of the canvas. Convert this square’s fill to a stroke, align it horizontally and vertically to the center, then lock it.

Using the rectangle tool, create a 780 x 780 pixel square. Position it in the top-left corner of the margin guide. Duplicate this square three times and arrange them in a 2x2 grid, naming them "Square 1", "Square 2", etc. Adjust the squares' colors to be subtly lighter than the background. Group and lock these squares as "Background".

Step 2 - Set Up for Animation

Adjust the animation timeline to 1.5 seconds to set a quick pace. Start by focusing on the loader element, which will serve as a template. Activate the front grid guide and zoom in. Enable "Snap to Grid" to ensure precision when positioning points.

Use the pen tool to place anchor points evenly across the grid, aiming for a total of 12 points, all positioned at the center of each grid square. Select every other anchor point while holding the shift key, then adjust these points upward by four increments.

With every other point selected, convert them into rounded shapes by adjusting the anchor type to create a smooth, wave-like line. Remove the end anchor points to define a start and end position for the stroke loader. Set the stroke thickness to 26 points, with rounded ends. After verifying the shape, remove the guide to keep the workspace clear.

Unlock the background layer temporarily to center-align the path within the workspace, aligning it both vertically and horizontally, then lock the background again. Rename layers as needed for clarity - labeling the base layer as "wave background." Set the color to a slightly darker or lighter hue for a subtle contrast. Duplicate this background path to create a wave effect, renaming each duplicate as "Wave 1," "Wave 2," and so on.

Step 3 - Animate the Stroke Offset

For Wave 1, animate the stroke offset by setting an initial offset of 600 and a dash-gap pattern (350, 250, 250) in a bright color, such as yellow-green. Set a keyframe for the initial offset and animate it to 0 at the end of the timeline to create the moving effect.

For Wave 2, adjust the dash and gap values to create a shorter wave with a contrasting color. For Wave 3, repeat the process with a shorter dash and gap configuration, creating a third animated wave.

Step 4 - Refinement

Play through the animation to observe the three animated waves moving in tandem. Adjust colors for additional contrast if necessary. These steps can be replicated to create additional stroke loaders with the same principles.