How I Made a Generator for SVG Loaders With Sass and SMIL Options
While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors, shapes, and effects. It even lets you paste in a custom path or text, and then download the final SVG, copy the code, or open a demo over at CodePen.
How it started
Three coincidences led me to build a generator for SVG loaders.
Coincidence 1: Sarah Drasner’s book
The first time I read about Sass loops was in Sarah Drasner’s SVG Animations. She shows how to stagger animations with a Sass function (like the does in Chapter 6, “Animating Data Visualizations”).
I was inspired by that chapter and the possibilities of Sass loops.
Coincidence 2: A GIF
At that same point in life, I was asked to replicate a “loader” element, similar to Apple’s old classic.
I referenced Sarah’s example to make it happen. This is the Sass loop code I landed on:
@for $i from 1 to 12 {
.loader:nth-of-type(#{$i}) {…