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 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 :before element to the left by using left: -2rem
and the :after 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.