Pure CSS Circular Spinners

HTML
<div class='loader1 circle border-1'> <div class='spinner-container-A'> <div class='spinner-1 circle border-1'> <div class='spinner-container-A'> <div class='spinner-1 circle border-1'> </div> </div> </div> </div> </div> <div class='loader2 circle border-1'> <div class='spinner-container-B'> <div class='spinner-1 circle border-1'> <div class='spinner-container-B'> <div class='spinner-1 circle border-1'> <div class='spinner-container-B'> <div class='spinner-1 circle border-1'> </div> </div> </div> </div> </div> </div> </div> <div class='loader3 circle border-1'> <div class='spinner-container-B'> <div class='spinner-2 circle border-1'> <div class='spinner-container-B'> <div class='spinner-2 circle border-1'> <div class='spinner-container-B'> <div class='spinner-2 circle border-1'> <div class='spinner-container-B'> <div class='spinner-2 circle border-1'> <div class='spinner-container-B'> <div class='spinner-2 circle border-1'> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader4 circle border-1'> <div class='spinner-container-B'> <div class='spinner-3 circle border-1'> <div class='spinner-container-B'> <div class='spinner-3 circle border-1'> <div class='spinner-container-B'> <div class='spinner-3 circle border-1'> <div class='spinner-container-B'> <div class='spinner-3 circle border-1'> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader5 circle border-1'> <div class='spinner-container-C'> <div class='spinner-4 circle border-1'> <div class='spinner-container-C'> <div class='spinner-4 circle border-1'> <div class='spinner-container-C'> <div class='spinner-4 circle border-1'> </div> </div> </div> </div> </div> </div> </div> <div class='loader6 circle border-1'> <div class='spinner-container-C'> <div class='spinner-5 circle border-1'> <div class='spinner-container-C'> <div class='spinner-5 circle border-1'> <div class='spinner-container-C'> <div class='spinner-5 circle border-1'> </div> </div> </div> </div> </div> </div> </div> <div class='loader7 circle border-2'> <div class='spinner-container-A'> <div class='spinner-1 circle border-2'> <div class='spinner-container-A'> <div class='spinner-1 circle border-2'> </div> </div> </div> </div> </div> <div class='loader8 circle border-2'> <div class='spinner-container-B'> <div class='spinner-1 circle border-2'> <div class='spinner-container-B'> <div class='spinner-1 circle border-2'> <div class='spinner-container-B'> <div class='spinner-1 circle border-2'> </div> </div> </div> </div> </div> </div> </div> <div class='loader9 circle border-2'> <div class='spinner-container-B'> <div class='spinner-2 circle border-2'> <div class='spinner-container-B'> <div class='spinner-2 circle border-2'> <div class='spinner-container-B'> <div class='spinner-2 circle border-2'> <div class='spinner-container-B'> <div class='spinner-2 circle border-2'> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader10 circle border-2'> <div class='spinner-container-B'> <div class='spinner-3 circle border-2'> <div class='spinner-container-B'> <div class='spinner-3 circle border-2'> <div class='spinner-container-B'> <div class='spinner-3 circle border-2'> </div> </div> </div> </div> </div> </div> </div> <div class='loader11 circle border-2'> <div class='spinner-container-C'> <div class='spinner-4 circle border-2'> <div class='spinner-container-C'> <div class='spinner-4 circle border-2'> <div class='spinner-container-C'> <div class='spinner-4 circle border-2'> </div> </div> </div> </div> </div> </div> </div> <div class='loader12 circle border-2'> <div class='spinner-container-C'> <div class='spinner-5 circle border-2'> <div class='spinner-container-C'> <div class='spinner-5 circle border-2'> <div class='spinner-container-C'> <div class='spinner-5 circle border-2'> </div> </div> </div> </div> </div> </div> </div> <div class='loader13 circle border-3'> <div class='spinner-container-A'> <div class='spinner-1 circle border-3'> <div class='spinner-container-A'> <div class='spinner-1 circle border-3'> </div> </div> </div> </div> </div> <div class='loader14 circle border-3'> <div class='spinner-container-B'> <div class='spinner-1 circle border-3'> <div class='spinner-container-B'> <div class='spinner-1 circle border-3'> <div class='spinner-container-B'> <div class='spinner-1 circle border-3'> </div> </div> </div> </div> </div> </div> </div> <div class='loader15 circle border-3'> <div class='spinner-container-B'> <div class='spinner-2 circle border-3'> <div class='spinner-container-B'> <div class='spinner-2 circle border-3'> <div class='spinner-container-B'> <div class='spinner-2 circle border-3'> <div class='spinner-container-B'> <div class='spinner-2 circle border-3'> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader16 circle border-3'> <div class='spinner-container-B'> <div class='spinner-3 circle border-3'> <div class='spinner-container-B'> <div class='spinner-3 circle border-3'> <div class='spinner-container-B'> <div class='spinner-3 circle border-3'> <div class='spinner-container-B'> <div class='spinner-3 circle border-3'> <div class='spinner-container-B'> <div class='spinner-3 circle border-3'> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader17 circle border-3'> <div class='spinner-container-C'> <div class='spinner-4 circle border-3'> <div class='spinner-container-C'> <div class='spinner-4 circle border-3'> <div class='spinner-container-C'> <div class='spinner-4 circle border-3'> <div class='spinner-container-C'> <div class='spinner-4 circle border-3'> <div class='spinner-container-C'> <div class='spinner-4 circle border-3'> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader18 circle border-3'> <div class='spinner-container-C'> <div class='spinner-5 circle border-3'> <div class='spinner-container-C'> <div class='spinner-5 circle border-3'> <div class='spinner-container-C'> <div class='spinner-5 circle border-3'> </div> </div> </div> </div> </div> </div> </div>
CSS
body{ background-color:#63a1f4; } .loader1, .loader2, .loader3, .loader4, .loader5, .loader6, .loader7, .loader8, .loader9, .loader10, .loader11, .loader12, .loader13, .loader14, .loader15, .loader16, .loader17, .loader18{ box-sizing:border-box; width:100px; height:100px; position:absolute; animation:rotation 6s infinite linear; } .loader1{ left:100px; top:100px; } .loader2{ left:300px; top:100px; } .loader3{ left:500px; top:100px; } .loader4{ left:700px; top:100px; } .loader5{ left:900px; top:100px; } .loader6{ left:1100px; top:100px; } .loader7{ left:100px; top:300px; } .loader8{ left:300px; top:300px; } .loader9{ left:500px; top:300px; } .loader10{ left:700px; top:300px; } .loader11{ left:900px; top:300px; } .loader12{ left:1100px; top:300px; } .loader13{ left:100px; top:500px; } .loader14{ left:300px; top:500px; } .loader15{ left:500px; top:500px; } .loader16{ left:700px; top:500px; } .loader17{ left:900px; top:500px; } .loader18{ left:1100px; top:500px; } .circle{ box-sizing:border-box; border-radius:50%; } .border-1{ border:2px solid #fff; } .border-2{ border-top:2px solid #fff; border-left:2px solid #fff; border-bottom:2px solid transparent; border-right:2px solid transparent; } .border-3{ border-top:2px solid #fff; border-left:2px solid transparent; border-bottom:2px solid transparent; border-right:2px solid transparent; } .loader18 .border-3, .loader18{ border-bottom:2px solid #fff; } .spinner-container-A{ position:absolute; width:80%; height:80%; left:10%; top:10%; animation:rotation 4s infinite linear; } .spinner-container-B{ position:absolute; width:100%; height:100%; left:0; top:0; animation:rotation 4s infinite linear; } .spinner-container-C{ position:absolute; width:80%; height:80%; left:10%; top:10%; } .spinner-1{ position:absolute; width:50%; height:50%; left:calc(7.32% - 1px); top:calc(7.32% - 1px); } .spinner-2{ position:absolute; width:75%; height:75%; left:calc(3.66% - 1px); top:calc(3.66% - 1px); } .spinner-3{ position:absolute; animation:resize 4s infinite linear; } .spinner-4{ position:absolute; width:100%; height:100%; top:0; left:0; animation:resize 4s infinite linear, rotation 4s infinite linear; } .spinner-5{ position:absolute; width:100%; height:100%; top:0; left:0; animation:resize2 4s infinite linear, rotation 4s infinite linear; } @keyframes rotation{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @keyframes resize{ 0%,100%{ width:calc(100% + 4px); height:calc(100% + 4px); left:-2px; top:-2px; } 50%{ width:50%; height:50%; left:calc(7.32% - 1px); top:calc(7.32% - 1px); } } @keyframes resize2{ 0%,100%{ width:calc(100% + 4px); height:calc(100% + 4px); left:-2px; top:-2px; } 50%{ width:50%; height:50%; left:25%; top:25%; } }
JAVASCRIPT
Expand for more options Login