#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( 39 to bottom, 40 hsl(330, 3.13%, 25.1%) 0%, 41 hsl(177.27, 21.71%, 32.06%) 5.5%, 42 hsl(176.67, 34.1%, 36.88%) 12.1%, 43 hsl(176.61, 42.28%, 40.7%) 19.6%, 44 hsl(176.63, 48.32%, 43.88%) 27.9%, 45 hsl(176.66, 53.07%, 46.58%) 36.6%, 46 hsl(176.7, 56.94%, 48.91%) 45.6%, 47 hsl(176.74, 62.39%, 50.91%) 54.6%, 48 hsl(176.77, 69.86%, 52.62%) 63.4%, 49 hsl(176.8, 76.78%, 54.08%) 71.7%, 50 hsl(176.83, 83.02%, 55.29%) 79.4%, 51 hsl(176.85, 88.44%, 56.28%) 86.2%, 52 hsl(176.86, 92.9%, 57.04%) 91.9%, 53 hsl(176.88, 96.24%, 57.59%) 96.3%, 54 hsl(176.88, 98.34%, 57.93%) 99%, 55 hsl(176.89, 99.07%, 58.04%) 100% 56 ); 57} 58 59.cube-top { 60 position: absolute; 61 width: 75px; 62 height: 75px; 63 background: hsl(330, 3.13%, 25.1%) 0%; 64 /* width 75px / 2 = 37.5px */ 65 transform: rotateX(90deg) translateZ(37.5px); 66 transform-style: preserve-3d; 67} 68 69.cube-top::before { 70 content: ''; 71 position: absolute; 72/* u can choose any size */ 73 width: 75px; 74 height: 75px; 75 background: hsl(176.61, 42.28%, 40.7%) 19.6%; 76 transform: translateZ(-90px); 77 filter: blur(10px); 78 box-shadow: 0 0 10px #323232, 79 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%, 80 0 0 30px #323232, 81 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%; 82} 83
Comments
Variations
7Juanes200122
69 views
Juanes200122
51 views
Juanes200122
47 views
Juanes200122
47 views
Juanes200122
42 views
Abhi-6284
38 views
MIT License