#e8e8e8
1.cube-loader { 2 position: relative; 3 /* u can choose any size */ 4 width: 75px; 5 height: 75px; 6 transform-style: preserve-3d; 7 transform: rotateX(-30deg); 8 animation: animate 4s linear infinite; 9} 10 11@keyframes animate { 12 0% { 13 transform: rotateX(-30deg) rotateY(0); 14 } 15 16 100% { 17 transform: rotateX(-30deg) rotateY(360deg); 18 } 19} 20 21.cube-loader .cube-wrapper { 22 position: absolute; 23 width: 100%; 24 height: 100%; 25 /* top: 0; 26 left: 0; */ 27 transform-style: preserve-3d; 28} 29 30.cube-loader .cube-wrapper .cube-span { 31 position: absolute; 32 width: 100%; 33 height: 100%; 34 /* top: 0; 35 left: 0; */ 36 /* width 75px / 2 = 37.5px */ 37 transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px); 38 background: linear-gradient(to bottom, 39 hsl(0, 0%, 100%) 0%, 40 hsl(0, 0%, 100%) 5.5%, 41 hsl(0, 0%, 100%) 12.1%, 42 hsl(0, 0%, 0%) 100%, 43 hsl(0, 0%, 100%) 27.9%, 44 hsl(0, 0%, 100%) 36.6%, 45 hsl(0, 0%, 100%) 45.6%, 46 hsl(0, 0%, 0%) 100%, 47 hsl(0, 0%, 100%) 63.4%, 48 hsl(0, 0%, 100%) 71.7%, 49 hsl(0, 0%, 100%) 79.4%, 50 hsl(0, 0%, 0%) 100%, 51 hsl(0, 0%, 100%) 100%, 52 hsl(0, 0%, 100%) 100%, 53 hsl(0, 0%, 100%) 100%, 54 hsl(0, 0%, 0%) 100%); 55} 56 57.cube-top { 58 position: absolute; 59 width: 75px; 60 height: 75px; 61 background: hsl(0, 0%, 98%) 0%; 62 /* width 75px / 2 = 37.5px */ 63 transform: rotateX(90deg) translateZ(37.5px); 64 transform-style: preserve-3d; 65} 66 67.cube-top::before { 68 content: ''; 69 position: absolute; 70 /* u can choose any size */ 71 width: 75px; 72 height: 75px; 73 background: hsl(0, 0%, 33%) 19.6%; 74 transform: translateZ(-90px); 75 filter: blur(10px); 76 box-shadow: 0 0 10px #ffffff, 77 0 0 20px hsl(0, 0%, 0%) 19.6%, 78 0 0 30px #ffffff, 79 0 0 40px hsl(0, 0%, 0%) 19.6%; 80} 81 82
161 views
Variation of aloader
161 views
Variation of aloader
Comments
MIT License