Loader by mrpumps31232
#e8e8e8
1.loading { 2 width: 100px; 3 height: 100px; 4 perspective: 1000px; 5 margin: 50px auto; 6} 7 8.cube { 9 width: 100%; 10 height: 100%; 11 position: relative; 12 transform-style: preserve-3d; 13 animation: rotate 2s infinite linear; 14} 15 16.side { 17 position: absolute; 18 width: 100%; 19 height: 100%; 20 border: 2px solid rgb(255, 255, 255); 21} 22 23.front { 24 background: linear-gradient(45deg, #f00, #0ff); 25 transform: translateZ(50px); 26} 27 28.back { 29 background: linear-gradient(45deg, #0ff, #f00); 30 transform: translateZ(-50px) rotateY(180deg); 31} 32 33.top { 34 background: linear-gradient(45deg, #f0f, #ff0); 35 transform: rotateX(90deg) translateZ(50px); 36} 37 38.bottom { 39 background: linear-gradient(45deg, #ff0, #f0f); 40 transform: rotateX(-90deg) translateZ(50px); 41} 42 43.left { 44 background: linear-gradient(45deg, #0f0, #00f); 45 transform: rotateY(-90deg) translateZ(50px); 46} 47 48.right { 49 background: linear-gradient(45deg, #00f, #0f0); 50 transform: rotateY(90deg) translateZ(50px); 51} 52 53@keyframes rotate { 54 from { 55 transform: rotateY(0deg) rotateX(0deg); 56 } 57 58 to { 59 transform: rotateY(360deg) rotateX(360deg); 60 } 61} 62
839 views
839 views
MIT License