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.