Loader by Admin12121
#212121
1.content { 2 width: 300px; 3 height: 300px; 4 position: relative; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8} 9 10.content .planet { 11 width: 65%; 12 height: 65%; 13 background-color: #546c8c; 14 border-radius: 100%; 15 position: absolute; 16 display: flex; 17 align-items: center; 18 transform-origin: center center; 19 box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1); 20 animation: planet 5s ease infinite alternate; 21 /* planet ring */ 22 /* to cover the back of the ring */ 23 /* planet spots */ 24} 25 26@keyframes planet { 27 0% { 28 transform: rotate(10deg); 29 } 30 31 100% { 32 transform: rotate(-10deg); 33 } 34} 35 36.content .planet .ring { 37 position: absolute; 38 width: 300px; 39 height: 300px; 40 border-radius: 100%; 41 background-color: #bacbd9; 42 display: flex; 43 align-items: center; 44 justify-content: center; 45 transform-origin: 33% center; 46 box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1); 47 animation: ring 3s ease infinite; 48 /* small ball */ 49 /* inner ring */ 50} 51 52@keyframes ring { 53 0% { 54 transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px); 55 } 56 57 100% { 58 transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px); 59 } 60} 61 62.content .planet .ring:before { 63 content: ""; 64 position: absolute; 65 width: 10px; 66 height: 30px; 67 border-radius: 100%; 68 background-color: #7ea1bf; 69 z-index: 2; 70 left: calc(0px - 5px); 71 box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2); 72} 73 74.content .planet .ring:after { 75 content: ""; 76 position: absolute; 77 width: 240px; 78 height: 240px; 79 border-radius: 100%; 80 background-color: #7ea1bf; 81 box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1); 82} 83 84.content .planet .cover-ring { 85 position: absolute; 86 width: 100%; 87 height: 50%; 88 border-bottom-left-radius: 80%; 89 border-bottom-right-radius: 80%; 90 border-top-left-radius: 100px; 91 border-top-right-radius: 100px; 92 transform: translate(0px, -17px); 93 background-color: #546c8c; 94 z-index: 2; 95 box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1); 96} 97 98.content .planet .spots { 99 width: 100%; 100 height: 100%; 101 display: flex; 102 align-items: center; 103 justify-content: center; 104 position: absolute; 105 z-index: 2; 106} 107 108.content .planet .spots span { 109 width: 30px; 110 height: 30px; 111 background-color: #3c4359; 112 position: absolute; 113 border-radius: 100%; 114 box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3); 115 animation: dots 5s ease infinite alternate; 116} 117 118@keyframes dots { 119 0% { 120 box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3); 121 } 122 123 100% { 124 box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3); 125 } 126} 127 128.content .planet .spots span:nth-child(1) { 129 top: 20px; 130 right: 50px; 131} 132 133.content .planet .spots span:nth-child(2) { 134 top: 40px; 135 left: 50px; 136 width: 15px; 137 height: 15px; 138} 139 140.content .planet .spots span:nth-child(3) { 141 top: 80px; 142 left: 20px; 143 width: 25px; 144 height: 25px; 145} 146 147.content .planet .spots span:nth-child(4) { 148 top: 80px; 149 left: 90px; 150 width: 40px; 151 height: 40px; 152} 153 154.content .planet .spots span:nth-child(5) { 155 top: 160px; 156 left: 70px; 157 width: 15px; 158 height: 15px; 159} 160 161.content .planet .spots span:nth-child(6) { 162 top: 165px; 163 left: 125px; 164 width: 10px; 165 height: 10px; 166} 167 168.content .planet .spots span:nth-child(7) { 169 top: 90px; 170 left: 150px; 171 width: 15px; 172 height: 15px; 173} 174 175.content p { 176 color: #bacbd9; 177 font-size: 14px; 178 z-index: 2; 179 position: absolute; 180 bottom: -20px; 181 font-family: "Roboto Mono", monospace; 182 animation: text 4s ease infinite; 183 width: 100px; 184 text-align: center; 185} 186 187@keyframes text { 188 0% { 189 transform: translateX(-30px); 190 letter-spacing: 0px; 191 color: #bacbd9; 192 } 193 194 25% { 195 letter-spacing: 3px; 196 color: #7ea1bf; 197 } 198 199 50% { 200 transform: translateX(30px); 201 letter-spacing: 0px; 202 color: #bacbd9; 203 } 204 205 75% { 206 letter-spacing: 3px; 207 color: #7ea1bf; 208 } 209 210 100% { 211 transform: translateX(-30px); 212 letter-spacing: 0px; 213 color: #bacbd9; 214 } 215}
869 views
869 views
MIT License