CSS Double Circle Bounce

This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please wait.

In this tutorial we're going to create a CSS loader that consists of two circles which grow from within the other circle on an infinite loop.

The HTML

The HTML will consist of a wrapper DIV with two HTML elements inside, for this we're just using two extra divs.

<div id="double-circle-bounce">
    <div></div>
    <div></div>
</div>

The CSS

This CSS for this is easier than you would think you just need to create two circles that scale and shrink on top of each other and then delay one of the circles to start a bit later. The wrapper div will be used to hold the two circles it needs to be the size that you want the circles to be. Place the position to be relative and we'll be able to make sure that the circles overlap each other.

#double-circle-bounce {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
}

The inner DIVs will need to be the full size of the wrapper, we do this by using width: 100% and height: 100%, then we make it a circle by using border-radius: 50%. Using position: absolute will ensure that the circles are placed on top of each other. Then we add the animation of double-bounce to both of these elements, with both of these elements using the same animation one needs to be delayed. By setting the opacity to 0.6 it will give the transparent look to the circles.

#double-circle-bounce div
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    animation: double-bounce 2s infinite ease-in-out;
}

Using the :nth-child selector we can select the second element and delay the animation to start half way through the animation cycle at 1 second.

#double-circle-bounce div:nth-child(2)
{
    animation-delay: -1.0s;
}

On the animation all we need to do is start the animation with a scale of 0 then half way increase the scale back to full size and finish back at 0.

@keyframes double-bounce {
    0%, 100% {
        transform: scale(0.0);
    }

    50%
    {
        transform: scale(1.0);
    }
}

View the demo to see the HTML and CSS in action.