7.1K views
1.pyramid-loader { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 display: block; 6 transform-style: preserve-3d; 7 transform: rotateX(-20deg); 8} 9 10.wrapper { 11 position: relative; 12 width: 100%; 13 height: 100%; 14 transform-style: preserve-3d; 15 animation: spin 4s linear infinite; 16} 17 18@keyframes spin { 19 100% { 20 transform: rotateY(360deg); 21 } 22} 23 24.pyramid-loader .wrapper .side { 25 width: 70px; 26 height: 70px; 27/* you can choose any gradient or color you want */ 28 /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */ 29 position: absolute; 30 top: 0; 31 left: 0; 32 right: 0; 33 bottom: 0; 34 margin: auto; 35 transform-origin: center top; 36 clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 37} 38 39.pyramid-loader .wrapper .side1 { 40 transform: rotateZ(-30deg) rotateY(90deg); 41 background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585); 42} 43 44.pyramid-loader .wrapper .side2 { 45 transform: rotateZ(30deg) rotateY(90deg); 46 background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC); 47} 48 49.pyramid-loader .wrapper .side3 { 50 transform: rotateX(30deg); 51 background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC); 52} 53 54.pyramid-loader .wrapper .side4 { 55 transform: rotateX(-30deg); 56 background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585); 57} 58 59.pyramid-loader .wrapper .shadow { 60 width: 60px; 61 height: 60px; 62 background: #8B5AD5; 63 position: absolute; 64 top: 0; 65 left: 0; 66 right: 0; 67 bottom: 0; 68 margin: auto; 69 transform: rotateX(90deg) translateZ(-40px); 70 filter: blur(12px); 71}
MIT License