Paulund

CSS Circle Triangle

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 triangle loader made up of circles which rotate from a triangle to a line.

The HTML

The HTML for this loader is very simple you just need one HTML element, there are three circles in the loader, the other two are created in CSS by using pseudo selectors :before and :after.


<div id="circle-triangle"></div>

The CSS

The first element we need to style is going to be the middle circle, this is done by setting a height and width with a border-radius of 50%. Adding the animation to this main element will also be used by the pseudo elements :before and :after. Remember to add the position: relative so that we can position the extra elements.


#circle-triangle {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    background: #333;
    display: block;
    margin: 2em auto 0;
    position: relative;
    animation: spinCircleTriangle 2s ease infinite;
}

Creating the extra elements using the pseudo selectors, will need to be set to position: absolute then we can change the position using the left property. We want the extra elements to look the same as the main element, we can do this by using the inherit value on the CSS properties.


#circle-triangle:before, #circle-triangle:after
{
   content:'';
   display:block;
   position:absolute;
   height:inherit;
   width:inherit;
   background:inherit;
   border-radius:inherit;
   animation:spinCircleTriangle 2s ease infinite;
}

To make sure we position these elements correctly we'll move the element to the left by using left: -2rem and the element to the right by using left: 2rem.


#circle-triangle:before{
     left:-2rem;
}
#circle-triangle:after{
     left:2rem;
}

The spinCircleTriangle animation will rotate the circles using the transform property and at the same time move the element up so that it appears at the top of the triangle.


@keyframes spinCircleTriangle{
    0%{
        top:0;
        transform:rotate(0deg);
    }
    50%{
        top:-2rem;
        transform:rotate(-180deg);
    }
    100%{
        top:0;
        transform:rotate(-360deg);
    }
}

View the demo to see the HTML and CSS in action.