Hexagonal Spinners

HTML
<div class='loader1'> <div class='spinner1'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader2'> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader3'> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader4'> <div class='spinner1'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner2'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader5'> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner1'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader6'> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner2'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader7'> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader8'> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader9'> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader10'> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader11'> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader12'> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-B'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader13'> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader14'> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader15'> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> <div class='loader16'> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader17'> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class='loader18'> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> <div class='spinner3'> <div class='container-A'> <div class='hex0'></div> <div class='hex120'></div> <div class='hex240'></div> </div> </div> </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, .loader19, .loader20, .loader21, .loader22, .loader23, .loader24{ box-sizing:border-box; width:100px; height:100px; position:absolute; } .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; } .loader19{ left:100px; top:700px; } .loader20{ left:300px; top:700px; } .loader21{ left:500px; top:700px; } .loader22{ left:700px; top:700px; } .loader23{ left:900px; top:700px; } .loader24{ left:1100px; top:700px; } .container-A{ position:absolute; width:75%; height:75%; left:12.5%; top:12.5%; } .container-B{ position:absolute; width:100%; height:100%; left:0; top:0; } .spinner1, .spinner2, .spinner3{ position:absolute; width:100%; height:100%; left:0; top:0; } .spinner1{ animation : rotation0 4s infinite linear, resize1 4s infinite linear; } .spinner2{ animation : rotation0 4s infinite linear, resize2 4s infinite linear; } .spinner3{ animation : rotation0 6s infinite linear, resize3 6s infinite linear; } .hex0, .hex120, .hex240{ position:absolute; box-sizing:border-box; width:100%; height:57.74%; left:0; top:21.13%; border-left:2px solid #fff; border-right:2px solid #fff; } .loader8 .hex0, .loader8 .hex120, .loader8 .hex240, .loader11 .hex0, .loader11 .hex120, .loader11 .hex240, .loader14 .hex0, .loader14 .hex120, .loader14 .hex240, .loader17 .hex0, .loader17 .hex120, .loader17 .hex240{ border-right:none; } .loader9 .hex0, .loader12 .hex0, .loader15 .hex0, .loader18 .hex0 { border:none; } .hex0{ animation:rotation0 4s infinite linear; } .hex120{ transform:rotate(120deg); animation:rotation120 4s infinite linear; } .hex240{ transform:rotate(240deg); animation:rotation240 4s infinite linear; } @keyframes rotation0{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } @keyframes rotation120{ 0%{ transform:rotate(120deg); } 100%{ transform:rotate(480deg); } } @keyframes rotation240{ 0%{ transform:rotate(240deg); } 100%{ transform:rotate(600deg); } } @keyframes resize1{ 0%,50%,100%{ width:100%; height:100%; left:0%; top:0%; } 25%,75%{ width:120%; height:120%; left:-10%; top:-10%; } 12.5%,37.5%,62.5%,87.5%{ width:70%; height:70%; left:15%; top:15%; } } @keyframes resize2{ 0%,33.33%,66.66%,100%{ width:100%; height:100%; left:0%; top:0%; } 16.66%,49.99%, 83.333%{ width:70%; height:70%; left:15%; top:15%; } } @keyframes resize3{ 0%,16.66%,33.33%,50%,66.66%,83.33%,100%{ width:100%; height:100%; top:0; left:0; } 2.77%,19.44%,36.11%,52.77%,69.44%,86.11%{ width:93.5%; height:93.5%; top:3.25%; left:3.25%; } 5.55%,22.22%,38.88%,55.55%,72.22%,88.88%{ width:84.4%; height:84.4%; top:7.8%; left:7.8%; } 8.33%,25%,41.66%,58.33%,75%,91.66%{ width:73.2%; height:73.2%; top:13.4%; left:13.4%; } 11.11%,27.77%,44.44%,61.11%,77.77%,94.44%{ width:84.4%; height:84.4%; top:7.8%; left:7.8%; } 13.88%,30.55%,47.22%,63.88%,80.55%,97.22%{ width:93.5%; height:93.5%; top:3.25%; left:3.25%; } }
JAVASCRIPT
Expand for more options Login