Loader by DeadlineBilisim
#212121
1.loader { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 perspective: 800px; 7} 8 9.loader-cube { 10 width: 100px; 11 height: 100px; 12 position: relative; 13 transform-style: preserve-3d; 14 transform-origin: 50% 50%; 15 animation: rotate 4s infinite linear; 16} 17 18.loader-cube:before, 19.loader-cube:after { 20 content: ""; 21 position: absolute; 22 width: 100%; 23 height: 100%; 24 background-color: transparent; 25} 26 27.loader-cube:before { 28 transform: rotateX(90deg) translateZ(50px); 29} 30 31.loader-cube:after { 32 transform: rotateY(90deg) translateZ(50px); 33} 34 35.loader-cube .face { 36 position: absolute; 37 width: 100%; 38 height: 100%; 39 background-color: rgb(252, 248, 248); 40 opacity: 0.8; 41 border: 2px solid rgb(252, 250, 250); 42} 43 44.loader-cube .face:nth-child(1) { 45 transform: rotateY(0deg) translateZ(50px); 46 background-color: #e74c3c; 47} 48 49.loader-cube .face:nth-child(2) { 50 transform: rotateX(90deg) translateZ(50px); 51 background-color: #3498db; 52} 53 54.loader-cube .face:nth-child(3) { 55 transform: rotateY(180deg) translateZ(50px); 56 background-color: #2ecc71; 57} 58 59.loader-cube .face:nth-child(4) { 60 transform: rotateX(-90deg) translateZ(50px); 61 background-color: #f1c40f; 62} 63 64.loader-cube .face:nth-child(5) { 65 transform: rotateY(90deg) translateZ(50px); 66 background-color: #9b59b6; 67} 68 69.loader-cube .face:nth-child(6) { 70 transform: rotateY(0deg) translateZ(-50px); 71 background-color: #1abc9c; 72} 73 74@keyframes rotate { 75 0% { 76 transform: rotateY(0deg) rotateX(0deg); 77 } 78 79 100% { 80 transform: rotateY(1turn) rotateX(1turn); 81 } 82} 83.overlay { 84 position: fixed; 85 top: 0; 86 left: 0; 87 width: 100%; 88 height: 100%; 89 background: transparent; /* Semi-transparent black overlay */ 90 display: none; 91 z-index: 9999; /* Ensure it's on top of everything */ 92} 93
390 views
Variation of aloader
MIT License