{"id":350223,"date":"2021-08-26T07:35:03","date_gmt":"2021-08-26T14:35:03","guid":{"rendered":"https:\/\/css-tricks.com\/?p=350223"},"modified":"2021-08-26T07:35:18","modified_gmt":"2021-08-26T14:35:18","slug":"how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options\/","title":{"rendered":"How I Made a Generator for SVG Loaders With Sass and SMIL Options"},"content":{"rendered":"\n

While learning Vue.js<\/a>, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let\u2019s take a look at one of those tools: a generator that makes SVG loaders<\/a> 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.<\/p>\n\n\n\n\n\n\n\n

\"\"\/<\/figure>\n\n\n

How it started<\/h3>\n\n\n

Three coincidences led me to build a generator for SVG loaders.<\/p>\n\n\n

Coincidence 1: Sarah Drasner\u2019s book<\/h4>\n\n\n

The first time I read about Sass loops was in Sarah Drasner\u2019s SVG Animations<\/em><\/a>. She shows how to stagger animations with a Sass function (like the does in Chapter 6, \u201cAnimating Data Visualizations\u201d).<\/p>\n\n\n\n

I was inspired by that chapter and the possibilities of Sass loops.<\/p>\n\n\n

Coincidence 2: A GIF<\/h4>\n\n\n

At that same point in life, I was asked to replicate a \u201cloader\u201d element, similar to Apple\u2019s old classic.<\/p>\n\n\n\n

\"A
This is a mockup of the loader I was asked to make.<\/figcaption><\/figure>\n\n\n\n

I referenced Sarah\u2019s example to make it happen. This is the Sass loop code I landed on:<\/p>\n\n\n\n

@for $i from 1 to 12 {\n  .loader:nth-of-type(#{$i}) {\n    animation: 1s $i * 0.08s opacityLoader infinite;\n  }\n}\n@keyframes opacityLoader {\n to { opacity: 0; }\n}<\/code><\/pre>\n\n\n\n
This defines a variable for a number (i<\/code>) from 1 to 12 that increases the delay of the animation with every :nth-child<\/code> element. It was the perfect use case to animate as many elements as I wanted with only two lines of Sass, saving me CSS declarations for each of the delays I needed. This is the same animation, but written in vanilla CSS to show the difference:<\/p>\n\n\n\n
.loader:nth-of-type(1) {\n  animation: 1s 0.08s opacityLoader infinite;\n}\n.loader:nth-of-type(2) {\n  animation: 1s 0.16s opacityLoader infinite;\n}\n\n\/* ... *\/\n\n.loader:nth-of-type(12) {\n  animation: 1s 0.96s opacityLoader infinite;\n}\n@keyframes opacityLoader {\n  to { opacity: 0; }\n}<\/code><\/pre>\n\n\n
Coincidence 3: An idea<\/h4>\n\n\n
With these things going on in my head, I had an idea for a gallery<\/em> of loaders, where each loader is made from the same Sass loop. I always struggle to find these kinds of things online, so I thought it might be useful for others, not to mention myself.<\/p>\n\n\n\n
I had already built this kind of thing before as a personal project, so I ended up building a loader generator<\/a>. Let me know if you find bugs in it!<\/p>\n\n\n
One loader, two outputs<\/h3>\n\n\n
I was blocked by my own developer skills while creating a generator that produces the right Sass output. I decided to try another animation approach with SMIL animations<\/a>, and that\u2019s what I wound up deciding to use.<\/p>\n\n\n\n
But then I received some help (thanks, ekrof!) and got Sass to work after all.<\/p>\n\n\n\n
So, I ended up adding both<\/em> options to the generator. I found it was a challenge to make both languages return the same result. In fact, they sometimes produce different<\/em> results.<\/p>\n\n\n
SMIL vs. CSS\/Sass<\/h4>\n\n\n
I learned quite a bit about SMIL and CSS\/Sass animations along the way. These are a few of the key takeaways that helped me on my way to making the generator:<\/p>\n\n\n\n