How to make a pure CSS loader animation using Sass and Compass

Today, just for fun, let’s make a nice pure CSS loader animation using Sass and Compass.

A demo is included below.

Note: If the demo doesn’t seem right. Hover over it and press “Rerun” in the bottom right corner. This is a small inconsistency that happens in the codepen embedded demos some times.

See the Pen Pure CSS animated loader made with Sass+Compass by Creative Punch (@CreativePunch) on CodePen.

This demo has a lot of divs. You can make a nice (and much more optimal) loader by using fewer elements. But I just wanted it to be all big and flashy!


The html for this loader is, as expected, very simple.

<div class="loader">

Gettin’ Sassy

Let’s turn all these divs (the demo has 80, to be exact) into a pure CSS loader!

First we define a variable with the amount of elements we put in our loader div.

$elements: 80

And here is the Sass for the CSS loader itself.

  display: block
  position: relative
  text-align: center
  width: 100%
  margin: 50px auto 

    list-style: none
    display: inline-block
    content: ""
    padding: 10px 2px
    transform: scale(0.5) 
    margin: 0 -1px
    animation: scaling 1s ease-in-out infinite alternate
    transform-origin: center

Nothing much fancy is going on here, just some positioning and sizing. The only notable lines here are these:

animation: scaling 1s ease-in-out infinite alternate
transform-origin: center

These lines define the basics for our animation. Since we will be scaling our divs in our animation and want them to scale from the center, we set the transform-origin property to center. Note in the animation property, “scaling” is the name we will give our keyframe animation.

Next, we will define our keyframes.

@keyframes scaling
    transform: scale(0.5)
    transform: scale(2)

Note: since we scale from 0.5, it is best to set scale to 0.5 also as a default for div.loader div elements. We already have done this so let’s move on to the real magic!

We need to style 80 elements! Luckily we can use Sass’ loop to make things a bit easier for us! Aside from that we will also be using the sin() function from Compass.

@for $i from 1 to ($elements + 1)
  div.loader div:nth-child(#{$i})
    animation-delay: #{sin(360deg * ($i / ($elements * $multiplier)))}s
    background-color: hsl((360deg * ($i / $elements)), 50%, 60%)

The first line defines our loop. We will step until $elements + 1. This means until 81. 81 not included.

This means we will output the style for 80 elements in this loop. And behold: the heart and soul of our loader, is only 2 lines! We use hsl coloring, the first parameter can go from 0 to 360 degrees (on the color wheel). The second parameter defines the saturation, the last element is the luminance. This gives us… well it gives us the whole freakin’ rainbow!

We also delay our scaling animation with some fun geometry calculation. I have added a $multiplier variable that you can mess around with to get different delays and animations. Go ahead and play with it in the demo!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on StumbleUpon0Share on Reddit0Share on LinkedIn0Share on TumblrBuffer this pageDigg this


You may also like...

Stay updated