CSS Spring Loader

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 one of my favourite CSS loaders the spring loader, it reminds me of slinky as it bounces from one side to the other.

The HTML

For the HTML we need to have 2 element a wrapper and the actually spring loader. The wrapper will need to just set the size of the area of the spring. The spring loader will then do all the hard work and bounce within the wrapper.

<div class="spring-loader-wrapper">
    <div id="spring-loader"></div>
</div>

The CSS

To start off the styling we set the size of the wrapper, this will be the total area of the spring loader and then we can make sure it just bounces within this block.

.spring-loader-wrapper
{
    width: 7rem;
    height: 3.5rem;
    margin: 2rem auto;
    overflow: hidden;
}

The spring loader needs to be the full width and height of the wrapper. Set the width to the set as the wrapper and the height to be double the size of the wrapper. We then add colour to the top and right border and set the others to be transparent. Adding a border-radius of 50% then applies the curve to the loader. Setting the rotate to -200deg ensures that the semi circle is set to the bottom left of the wrapper. Then we can add the animation of rotate to change the rotate around the semi circle to the other end of the wrapper and back again.

#spring-loader {
    width: 7rem;
    height: 7rem;
    border-style: solid;
    border-top-color: #000;
    border-right-color: #000;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotate 3s ease-in-out infinite;
    transform: rotate(-200deg)
}

The rotate animation will need to move the element to the other side of the wrapper div by using transform: rotate(115deg) to add the spring effect we need to change the size of the border-width for the duration of the spring from slim to wide.

@keyframes rotate {
    0% { border-width: 1rem; }
    25% { border-width: 0.3rem; }
    50% {
        transform: rotate(115deg);
        border-width: 1rem;
    }
    75% { border-width: 0.3rem;}
    100% { border-width: 1rem;}
}

That's all the HTML and CSS you need for this loader, view the demo to see this in action.