Paulund

CSS Hour Glass

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 a CSS loader that looks like an hour glass pouring sand down and resetting.

The HTML

The HTML that makes up this loader will be 4 elements, with one being the wrapper element, one being used for the top triangle, one being the line of sand, one being the bottom triangle.


<div id="hour-glass">
    <div></div>
    <div></div>
    <div></div>
</div>

The CSS

As the CSS is made up of 4 elements the wrapper element is going to be used to add the animation to rotate the the hour glass. The size of the element will just need to be big enough to house the entire hour glass.


#hour-glass {
    animation: hourGlassRotate 5s cubic-bezier(.8,0,.2,1) infinite;
    height: 5rem;
    width: 5rem;
    position: relative;
    margin: 0 auto;
}

@keyframes hourGlassRotate {
    90% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

The first child element is going to be used as the top triangle. To make a triangle in CSS you need to use the border-top, border-right and border-left CSS properties. The border-top is going to be used for the size of the triangle, making the other borders transparent will create a look of a triangle on the element. There is an animation added to the element of top, this animation needs to scale the triangle slowly smaller so it looks like it's disappearing. Changing the transform-origin to the center bottom so that the triangle gets smaller to the bottom.


#hour-glass div:nth-child(1)
{
    animation: top 5s linear infinite;
    border-top: 2rem solid #333;
    border-right: 2rem solid transparent;
    border-left: 2rem solid transparent;
    height: 0;
    width: 1px;
    transform-origin: 50% 100%;
}

@keyframes top {
    90% { transform: scale(0); }
    100% { transform: scale(0);}
}

The second child element is used as the bottom triangle and needs to use border-bottom, border-right and border-left to create a triangle pointing up. The animation bottom is applied to this element, this works in an opposite way to the top animation as it makes the triangle grow from the bottom.


#hour-glass div:nth-child(2) {
    animation: bottom 5s linear infinite;
    border-right: 2rem solid transparent;
    border-bottom: 2rem solid #333;
    border-left: 2rem solid transparent;
    height: 0;
    width: 1px;
    transform: scale(0);
    transform-origin: 50% 100%;
}

@keyframes bottom {
    10% { transform: scale(0); }
    90% { transform: scale(1); }
    100% { transform: scale(1); }
}

The third child element is going to be used as the line to give the illusion that the top triangle is being poured into the bottom triangle. The CSS is using a border-left of dotted and the animation of line will increase the height of the element to join with the other triangle.


#hour-glass div:nth-child(3) {
    animation: line 5s linear infinite;
    border-left: 1px dotted #333;
    height: 0;
    width: 0;
    position: absolute;
    top: 2rem;
    left: 2rem;
}

@keyframes line {
    10% { height: 2rem; }
    100% { height: 2rem; }
}

This is the HTML and CSS you need, view the demo to see this in action.