Combine the power of SCSS and SVG to create a loading animation.
Example
Here is the animation we are going to recreate:
See the Pen Loading SVG Cubez by Jonathan klughertz (@klugjo) on CodePen.
Steps
If you want to follow along, the easiest way is to use a tool like CodePen, JSFiddle or whichever is your favourite. Set it up to use SCSS.
1. Create the SVG Element
Let’s start by setting our body’s background color to black:


And create a 100px by 100px SVG element:


2. Draw the squares
SVG/HTML
To draw a rectangle, use the <rect />
element. We are going to need 16 rectangles. All with a class of .box
and .posij
where i is the row and j is the column.
Here is the final result and the only HTML/SVG code we are going to need:


SCSS
Let’s start by creating our .box
class. All squares should be 15px by 15px and of white colour:


Now our boxes are all of the right size and colour but they are all on top of each other. Let’s fix that with some SCSS goodness.


This is what we have so far
3. Colour Animation
Let’s start by defining our keyframes in the CSS. We will create a hideshow
animation which prints our squares in white for the first 20% of the time and then fades to black during the remaining 80%.


Now let’s apply this to all the .box element


1.6s
indicates that the animation lasts 1.6 seconds. Since we have 16 squares, we will put 100ms of delay in between each square.infinite
loops the animation forever.
This what we have so far:
4. Cascading Effect
Now we want all our cubes to start fading to black one after the other. This can be achieved using the animationdelay
CSS property.
The element with .pos11
will have 0s delay, the element with .pos12
will have a 0.1sec delay and so on until .pos44
with a delay of 1.5sec.
The formula to calculate the delay is:


And the SCSS equivalent is:


This is what we have so far:
This is starting to look good. However the animation goes from left to right for all rows and we want it to go from right to left for even rows.
This can be achieved with a bit of SCSS. I am going to introduce a $k
variable that will have a decreasing column index for even rows:


Where $i
is the row number and $j
is the column number.$i % 2 == 0
indicates an even row.5  $j
will transform 1,2,3,4 into 4,3,2,1
Then let’s use these new index instead of $j in our animationdelay


Let’s look at the result:
5. Scaling Effect
The last step needed is to scale each cube down as they fade out.
There are 2 aspects to this:
a. Scale the dimensions out
Done by adding a transform: scale(0.3)
property to the animation. 0.3 means that the figure will be scaled down to 30% of its original size.


b. Set the origin of the transform to the center of each square
We will have to compute the transformorigin
property for each square.
Inside the double loop, add the following property:


Here is the final result:
And the full SCSS code:

