Chasing circles – CSS animation examples

The animated loading icon is created from four circles. The circles haven’t any fill, however, have alternating stroke-colors.

<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
<circle cx="170" cy="170" r="160" stroke="#E2007C"/>
<circle cx="170" cy="170" r="135" stroke="#404041"/>
<circle cx="170" cy="170" r="110" stroke="#E2007C"/>
<circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>

In our CSS, we are able to set some basic properties to all or any of our circles so use the: nth-of-type selector to use a special stroke-dash array to every circle.

circle:nth-of-type(1) {
stroke-dasharray: 550;
}
circle:nth-of-type(2) {
stroke-dasharray: 500;
}
circle:nth-of-type(3) {
stroke-dasharray: 450;}
circle:nth-of-type(4) {
stroke-dasharray: 300;
}

Next, we’d like to form our keyframe animation. Our animation is basically simple: all we’d like to try to is to rotate the circle by 360 degrees. By inserting our transformation at the five hundred mark of the animation, the circle also will rotate back to its original position.

@keyframes preloader {
50% {
transform: rotate(360deg);
}
}

With our animation created, we tend to currently simply ought to apply it to our circles. we tend to set the animation name; duration; iteration count and temporal order operate. The ‘ease-in-out’ can offer the animation an additional teasing feel.

animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

At the instant, we’ve got our loader, however all of the weather square measure rotating along at an equivalent time. to repair this, we’ll apply some delays. We’ll produce our delays employing a Sass for a loop.

@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
animation-delay: #{$i * 0.15}s;
} }

Due to the delays, our circle currently animates successively, making the illusion of the circles chasing one another. the sole downside with this is often that once the page 1st masses, the circles square measure static, then they begin to maneuver, one at a time. we are able to deliver the goods an equivalent offset result, however, stop the unwanted pause in our animation by merely setting the delays to a negative price.

animation-delay: -#{$i * 0.15}s;

Demo | Download

Leave a Reply