Cubes Loader

HTML
<div class="container"> <div class="box-wrapper"> <div class="box"></div> </div> <div class="box-wrapper"> <div class="box"></div> </div> <div class="box-wrapper"> <div class="box"></div> </div> </div>
CSS
* { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; background: #333; display: flex; justify-content: center; } .container { transform-style: preserve-3d; perspective: 2000px; transform: rotateX(-30deg) rotateY(-45deg); } .box-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; transform: translate3d(0em, 3em, 1.5em); } .box-wrapper:last-child { transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em); } .box-wrapper:first-child { transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em); } .box-wrapper:nth-child(1) .box { background-color: #3498db; } .box-wrapper:nth-child(1) .box:before { background-color: #3498db; } .box-wrapper:nth-child(1) .box:after { background-color: #2980b9; } .box-wrapper:nth-child(2) .box { background-color: #2ecc71; } .box-wrapper:nth-child(2) .box:before { background-color: #2ecc71; } .box-wrapper:nth-child(2) .box:after { background-color: #27ae60; } .box-wrapper:nth-child(3) .box { background-color: #e74c3c; } .box-wrapper:nth-child(3) .box:before { background-color: #e74c3c; } .box-wrapper:nth-child(3) .box:after { background-color: #c0392b; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; animation: animate 4s infinite; width: 3em; height: 3em; } .box:before, .box:after { position: absolute; width: 100%; height: 100%; content: ""; } .box:before { left: 100%; bottom: 0; transform: rotateY(90deg); transform-origin: 0 50%; } .box:after { left: 0; bottom: 100%; transform: rotateX(90deg); transform-origin: 0 100%; } @keyframes animate { 8.33% { transform: translate3d(-50%, -50%, 0) scaleZ(2); } 16.7% { transform: translate3d(-50%, -50%, -3em) scaleZ(1); } 25% { transform: translate3d(-50%, -100%, -3em) scaleY(2); } 33.3% { transform: translate3d(-50%, -150%, -3em) scaleY(1); } 41.7% { transform: translate3d(-100%, -150%, -3em) scaleX(2); } 50% { transform: translate3d(-150%, -150%, -3em) scaleX(1); } 58.3% { transform: translate3d(-150%, -150%, 0) scaleZ(2); } 66.7% { transform: translate3d(-150%, -150%, 0) scaleZ(1); } 75% { transform: translate3d(-150%, -100%, 0) scaleY(2); } 83.3% { transform: translate3d(-150%, -50%, 0) scaleY(1); } 91.7% { transform: translate3d(-100%, -50%, 0) scaleX(2); } 100% { transform: translate3d(-50%, -50%, 0) scaleX(1); } }
JAVASCRIPT
Expand for more options Login