Paulund

CSS Speedo 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. CSS Loaders

In this tutorial we're going to create the CSS loader that behaves like a dashboard speedo meter, moving the dial from left to right and bounces back. We're going to have to create the circle for the dial and the bounce animation for the dial.

The HTML

The HTML for this CSS loader is very simple it's just a one element for this example we're just using a div.


<div id="speedo-loader"></div>

The CSS

To start off the styling for the speedo we need to create the circle to house the dial. For this we just use the height, width and border-radius property.


#speedo-loader{
    width: 3rem;
    height: 3rem;
    margin: 2rem auto;
    border: 2px #333 solid;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

We need to create two new elements for the half circle filler and the dial.


#speedo-loader:after, #speedo-loader:before{
    position: absolute;
    content: "";
}

The pseudo :after will be used for the dial element create a line by using width and height and a background-color. Then adding the animation of moveHand we can we can change the rotate property to move the hand from one side of the circle to the other. Because we have set the transform-origin it will mean that the line will be rotated from the end of the line and not the center.


#speedo-loader:after{
    width: 1.4rem;
    height: 2px;
    top: 2rem;
    transform-origin: 1px 1px;
    background-color: #333;
    animation: moveHand 2s linear infinite alternate;
    left: 48%;
}

@keyframes moveHand{
    0%{ transform: rotate(-160deg);}
    100%{ transform: rotate(-20deg);}
}

The :before element will be used as the filler for the bottom half of the circle, simply style it to full width and half the height of the circle, then fill this with a background-color.


#speedo-loader:before
{
    width: 3rem;
    height: 1.5rem;
    background-color: rgba(0,0,0,1);
    top: 2rem;
    left: 0;
}

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