Infinity Loader Without SVG

infinity loader
Making loader in the shape of infinity symbol (∞) using clip : rect()

[WPGP gif_id=”677″ width=”600″]

*Best supported in Chrome

Create Background circles

<div class="infinity-loader">
	<div class="bg"><!--background circles-->
		<div class="left-bg"></div> 
		<div class="right-bg"></div> 
	</div>
</div>
/*
	width = height = 70px
	border-width = 10px
*/
.infinity-loader .bg div{
    width: 70px;/* width */
    height: 70px;/* width */
    border: 10px solid #aaa;/* border-width solid #aaa */
    box-sizing: border-box;/* so that its border won't increase its width*/
    border-radius: 50%;/* to make the div round*/
}

two vertically aligned grey circles

Align them horizontally :
.infinity-loader{
	position: fixed;/*We have to use it as we are using absolute positioning on its children and we will align it in the center of the page*/
}

.infinity-loader .bg div{
	/*..*/
	position: absolute;
}

.infinity-loader .right-bg{
	transform: translate(100%,0);
}

two horizontally aligned grey circles

Make their borders overlap at their contact points :
.infinity-loader .right-bg{
	/*..*/
	left: -10px;/* -border-width */
}

circles making infinity symbol

Align at center :
.infinity-loader{
	/*..*/
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	/*yes, we have to define width and height, otherwise transformation won't work*/
	width: 130px;/* 2 x width - border-width */
	height: 70px;/* width */
}

infinity at center

Create foreground circles

First make top-left box in which our top-left circle will animate :
<div class="infinity-loader">
	<!-- .. -->

	<div class="fg"><!--foreground circles-->
		<div class="top-left-rect">
			<div></div>
		</div> 
	</div>
</div>
.infinity-loader .bg div, .infinity-loader > .fg > div > div{/*note this*/
	/*no change below*/
	width: 70px;/* width */
	height: 70px;/* width */
	border: 10px solid #aaa;/* border-width solid #aaa */
	box-sizing: border-box;/* so that its border won't increase its width*/
	border-radius: 50%;/* to make the div round*/
	position: absolute;
}

/*..*/

.infinity-loader > .fg > div > div{
	border-color: orangered;
}

infinity with orange-red circle

We only need half circle :
.infinity-loader > .fg > div > div{
	border-color: orangered orangered transparent transparent;
}

infinity with orange-red semicircle

Set its initial state :
.infinity-loader > .fg > div > div{
	/*..*/
	transform: rotate(135deg);
}

infinity with orange-red semicircle at bottom-left

Lets animate that half circle :
/*
	width = height = 70px
	border-width = 10px
	time = 1s
*/

/*..*/

.infinity-loader > .fg > div > div{
	/*..*/
	animation: spin 1s linear infinite;/* spin time linear infinite */
}

@keyframes spin {
	100%{transform: rotate(495deg)}/* (360 + 135)deg */
}

[WPGP gif_id=”694″ width=”600″]

Make it visible on the upper half portion only :
.infinity-loader > .fg > div{
	clip: rect(0,70px,35px,0);/* 0, width, width/2, 0*/
	position: absolute;/* required for using clip: rect() */
}

[WPGP gif_id=”697″ width=”600″]

Create Bottom Right Circle

<div class="fg"><!--foreground circles-->
	<div class="top-left-rect">
		<div></div>
	</div>
	<!-- add the following -->
	<div class="bottom-right-rect">
		<div></div>
	</div>
</div>
Align it with following CSS :
.infinity-loader > .fg > div > div{
	/*..*/
	position: static;/*add this otherwise transformation in its parent won't work as expect*/
}        

.infinity-loader > .fg > .bottom-right-rect{
	left:-10px;/* -border-width */
	transform: translateX(100%) scale(1,-1);
}

[WPGP gif_id=”700″ width=”600″]

We have to fix timings for continuity:
.infinity-loader > .fg > .bottom-right-rect > div{
	animation-delay: .5s;/* time/2 */
}

[WPGP gif_id=”703″ width=”600″]

But now top-left and bottom-right circles won’t give time for top-right and bottom-left circles to animate. They should pause for a duration to give other circles to animate :
.infinity-loader > .fg > .bottom-right-rect > div{
	animation-delay: .25s;/* time/4, we have to change it as animation duration has been decreasesd by 50% */
}

@keyframes spin {
	50%,100%{transform: rotate(495deg)}/* (360 + 135)deg , 50% time is for animation and other 50% for pause*/
}

[WPGP gif_id=”706″ width=”600″]

Create Top Right Circle

<div class="fg"><!--foreground circles-->
	<div class="top-left-rect">
		<div></div>
	</div>            
	<div class="bottom-right-rect">
	<div></div>
	</div>
	<!-- add the following -->
	<div class="top-right-rect">
		<div></div>
	</div>
</div>
Align it :
.infinity-loader > .fg > .top-right-rect{
	left:-10px;/* -border-width */
	transform: translateX(100%) scale(-1,1);
}

[WPGP gif_id=”709″ width=”600″]

And yes, adjust the timings :
.infinity-loader > .fg > .top-right-rect > div{
	animation-delay:.5s;/* (2 x time)/4 */
}

[WPGP gif_id=”712″ width=”600″]

Create Bottom Left Circle

<div class="fg"><!--foreground circles-->
	<div class="top-left-rect">
		<div></div>
	</div>            
	<div class="bottom-right-rect">
		<div></div>
	</div>
	<div class="top-right-rect">
		<div></div>
	</div>
	<!-- add the following -->
	<div class="bottom-left-rect">
		<div></div>
	</div>
</div>
.infinity-loader > .fg > .bottom-left-rect{
	transform: scale(-1);
}

.infinity-loader > .fg > .bottom-left-rect > div{
	animation-delay: .75s;/* (3 x time)/4 */
}

[WPGP gif_id=”715″ width=”600″]

Add glow

.infinity-loader > .fg {
	filter:drop-shadow(0 0 6px orangered);
}

[WPGP gif_id=”677″ width=”600″]

Whole code :
<div class="infinity-loader">
	<div class="bg"><!--background circles-->
		<div class="left-bg"></div> 
		<div class="right-bg"></div> 
	</div>
	<div class="fg"><!--foreground circles-->
		<div class="top-left-rect">
			<div></div>
		</div>            
		<div class="bottom-right-rect">
			<div></div>
		</div>
		<div class="top-right-rect">
			<div></div>
		</div>
		<div class="bottom-left-rect">
			<div></div>
		</div>
	</div>
</div>
/*
    width = height = 70px
    border-width = 10px
    time = 1s
*/
.infinity-loader{
    position: fixed;/*We have to use it as we are using absolute positioning on its children and we will align it in the center of the page*/
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /*yes, we have to define width and height, otherwise transformation won't work*/
    width: 130px;/* 2 x width - border-width */
    height: 70px;/* width */
}

.infinity-loader .bg div, .infinity-loader > .fg > div > div{
    width: 70px;/* width */
    height: 70px;/* width */
    border: 10px solid #aaa;/* border-width solid #aaa */
    box-sizing: border-box;/* so that its border won't increase its width*/
    border-radius: 50%;/* to make the div round*/
    position: absolute;
}

.infinity-loader .right-bg{
    transform: translate(100%,0);
    left: -10px;/* -border-width */
}

.infinity-loader > .fg > div > div{
    border-color: orangered orangered transparent transparent;
    transform: rotate(135deg);
    animation: spin 1s linear infinite;/* spin time linear infinite */
    position: static;/*add this otherwise transformation in its parent won't work as expect*/
}

.infinity-loader > .fg > div{
    clip: rect(0,70px,35px,0);/* 0, width, width/2, 0*/
    position: absolute;/* required for using clip: rect() */
}

.infinity-loader > .fg > .bottom-right-rect{
    left:-10px;/* -border-width */
    transform: translateX(100%) scale(1,-1);
}

.infinity-loader > .fg > .bottom-right-rect > div{
    animation-delay: .25s;/* time/4 */
}

.infinity-loader > .fg > .top-right-rect{
    left:-10px;/* -border-width */
    transform: translateX(100%) scale(-1,1);
}

.infinity-loader > .fg > .top-right-rect > div{
    animation-delay:.5s;/* (2 x time)/4 */
}

.infinity-loader > .fg > .bottom-left-rect{
    transform: scale(-1);
}

.infinity-loader > .fg > .bottom-left-rect > div{
    animation-delay: .75s;/* (3 x time)/4 */
}

.infinity-loader > .fg {
    filter:drop-shadow(0 0 6px orangered);
}

@keyframes spin {
    50%,100%{transform: rotate(495deg)}/* (360 + 135)deg*/
}
Code is also available here : https://codepen.io/zFunx/pen/VXmwbO. Useful links :
Issues :
  • Glowing effect doesn’t work in Edge and IE
  • Little mis-alignment in the circles in Firefox

Leave a Reply

Your email address will not be published. Required fields are marked *