Animate Stroke Loaders in Minutes | SVGator

In this tutorial, you will learn how to create a 1.5-second looping stroke loader animation in SVGator. This technique can be extended to other illustrations, allowing you to replicate the process.

00:26 Set Up the Canvas
04:52 Set Up for Animation
09:47 Animate the Stroke Offset
12:58 Refinement

Here's a detailed guide on how to create and animate a 1.5-second looping stroke loader animation, emphasizing the most critical steps.

Preparation
Create a 2100 x 2100 pixel canvas with a dark slate gray background. Add a centered 1740 x 1740 pixel stroked square as a margin guide and lock it. Draw four 780 x 780-pixel squares, place them in a 2x2 grid within the margin guide, lighten their colors slightly, then group and lock them as the "Background."

Animate
Start by designing a loader element. Enable "Snap to Grid", and place 12 anchor points evenly with the pen tool. Shift every other point upward to create a wave shape, then round these points for smoothness, and set the stroke to 26 points with rounded ends.

Center-align the wave in the workspace, then duplicate it to create multiple layers labeled "Wave 1", "Wave 2", etc. For Wave 1, set an initial stroke offset of 600 with a dash-gap pattern, animating it to 0 for a flowing effect. Adjust dash and gap values for each wave layer

Preview and Final Adjustments
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.

Subscribe: / @svgator
Let's connect:
Facebook: / svgator
Instagram: / svgatorapp
Twitter: / svgatorapp
LinkedIn: / svgator

SVGator is an online SVG (Scalable Vector Graphics) animation creator.

[sage-nt]

Page loaders are fun and I love creating new ones from time to time. Your video explains stroke animations perfectly, I would definitely use this for icons as well. Thank you!