Infinity Loader Without SVG

infinity loader
Making loader in the shape of infinity symbol (∞) using clip : rect()
GIF infinity loader
*Best supported in Chrome

Create Background circles

two vertically aligned grey circles

Align them horizontally :

two horizontally aligned grey circles

Make their borders overlap at their contact points :

circles making infinity symbol

Align at center :

infinity at center

Create foreground circles

First make top-left box in which our top-left circle will animate :

infinity with orange-red circle

We only need half circle :

infinity with orange-red semicircle

Set its initial state :

infinity with orange-red semicircle at bottom-left

Lets animate that half circle :

GIF animated semicircle in infinity

Make it visible on the upper half portion only :

GIF animated semicircle in upper half

Create Bottom Right Circle

Align it with following CSS :

GIF two animated semicircles

We have to fix timings for continuity:

GIF two animated semicircles with continuity

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 :

GIF two animated semicircles with continuity

Create Top Right Circle

Align it :

GIF three animated semicircles

And yes, adjust the timings :

GIF

Create Bottom Left Circle

GIF infinity loader

Add glow

GIF infinity loader

Whole code :

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