Loader by successfulfadwa
#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: hsla(0, 100%, 95%, 1); 39 background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 40 background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 41 background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 42 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 ); 43} 44 45.cube-top { 46 position: absolute; 47 width: 75px; 48 height: 75px; 49 background: hsla(0, 100%, 95%, 1); 50 background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 51 background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 52 background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 53 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 ); 54 /* width 75px / 2 = 37.5px */ 55 transform: rotateX(90deg) translateZ(37.5px); 56 transform-style: preserve-3d; 57} 58 59.cube-top::before { 60 content: ''; 61 position: absolute; 62/* u can choose any size */ 63 width: 75px; 64 height: 75px; 65 background: hsla(0, 100%, 95%, 1); 66 background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 67 background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 68 background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 69 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 ); 70 background: linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 71 background: -moz-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 72 background: -webkit-linear-gradient(90deg, hsla(0, 100%, 95%, 1) 1%, hsla(27, 100%, 85%, 1) 99%); 73 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#ffe3e3", endColorstr="#ffd5b2", GradientType=1 ); 74 transform: translateZ(-90px); 75 filter: blur(10px); 76 box-shadow: 0 0 10px #323232, 77 0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%, 78 0 0 30px #323232, 79 0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%; 80} 81
639 views
Variation of aloader
MIT License