Loader by fanishah
#212121
1.planet { 2 display: block; 3 width: 125px; 4 height: 125px; 5 position: relative; 6 transform-style: preserve-3d; 7 border-radius: 50%; 8 background: #fcc96b; 9 background: #fcc96b; 10 background: linear-gradient( 11 180deg, 12 #fcc96b 0%, 13 #fcc96b 15%, 14 #f7ae01 15%, 15 #f7ae01 19%, 16 #fcc96b 19%, 17 #fcc96b 22%, 18 #f7ae01 22%, 19 #f7ae01 28%, 20 #fcc96b 28%, 21 #fcc96b 31%, 22 #fcc96b 33%, 23 #fcc96b 36%, 24 #f7ae01 36%, 25 #f7ae01 48%, 26 #fcc96b 48%, 27 #fcc96b 55%, 28 #f7ae01 55%, 29 #f7ae01 66%, 30 #fcc96b 66%, 31 #fcc96b 70%, 32 #f7ae01 70%, 33 #f7ae01 73%, 34 #fcc96b 73%, 35 #fcc96b 82%, 36 #f7ae01 82%, 37 #c7ba9d 86%, 38 #fcc96b 86% 39 ); 40 box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25), 41 inset 8px -4px 6px rgba(199, 128, 0, 0.5), 42 inset -8px 4px 8px rgba(255, 235, 199, 0.5), inset 20px -5px 12px #f7ae01, 43 0 0 100px #ffffff59; 44 transform: rotateZ(-15deg); 45} 46 47.planet::before { 48 position: absolute; 49 content: ""; 50 display: block; 51 width: 100%; 52 height: 100%; 53 box-sizing: border-box; 54 border: 16px solid #e1a519; 55 border-top-width: 0; 56 border-radius: 50%; 57 box-shadow: 0 -2px 0 #c18620; 58 animation: rings1 0.8s infinite linear; 59} 60 61.planet::after { 62 position: absolute; 63 content: ""; 64 display: block; 65 width: 100%; 66 height: 100%; 67 box-sizing: border-box; 68 border: 8px solid #d48b0c; 69 border-top-width: 0; 70 border-radius: 50%; 71 box-shadow: 0 -2px 0 #b99309; 72 animation: rings2 0.8s infinite linear; 73} 74 75@keyframes rings1 { 76 0% { 77 transform: rotateX(65deg) rotateZ(0deg) scale(1.75); 78 } 79 80 100% { 81 transform: rotateX(65deg) rotateZ(360deg) scale(1.75); 82 } 83} 84 85@keyframes rings2 { 86 0% { 87 transform: rotateX(65deg) rotateZ(0deg) scale(1.7); 88 } 89 90 100% { 91 transform: rotateX(65deg) rotateZ(360deg) scale(1.7); 92 } 93}
2.2K views
2.2K views
MIT License