CSS Clock 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 a clock loader which will have a minute hand and an hour hand, the animations are going to be added to the hands to move around the clock. The minute hand will need to rotate faster than the hour hand to make sure it acts like a real clock.

#The HTML

The HTML for this loader is very easy it's just one HTML element, this main element is used as the clock face. The hands are going to be created using the :before and :after pseudo elements.

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

#The CSS

First we need to create the the clock face, for this you just need to create a circle by using border-radius: 50%, we don't need to add a background colour so we can add a border to the element to create round clock face.

#clock-loader{
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    margin: 2rem auto;
}

To create the clock hands we need to use the pseudo selector to create the elements and add a background colour the same colour as the clock face border.

#clock-loader:after, #clock-loader:before{
    position: absolute;
    content:"";
    background-color: #333;
}

With all the elements created we can style the clock hands and position them inside the clock face. Both of the elements use the same rotateHand animation but the minute hand will take 2 seconds to complete the animation and the hour hand will take 8 seconds to complete. You'll notice there is a transform-origin which will change the location the transform rotation.

#clock-loader:after{
    width: 1rem;
    height: 0.2rem;
    top: 1.25rem;
    left: 1.25rem;
    transform-origin: 1px 1px;
    animation: rotateHand 2s linear infinite;
}

#clock-loader:before{
    width: 0.8rem;
    height: 0.2rem;
    top: 1.25rem;
    left: 1.25rem;
    transform-origin: 1px 1px;
    animation: rotateHand 8s linear infinite;
}

The animation rotateHand will simply rotate the element 360 around the clock face, because we've changed the transform-origin the hand will pivot from on end of the element and not the center.

@keyframes rotateHand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

View the demo to see the full HTML and CSS.