Loader by Smit-Prajapati
#e8e8e8
1.loader { 2 width: 120px; 3 aspect-ratio: 1; 4 background: #bcbcbc; 5 border-radius: 50%; 6 position: relative; 7 padding: 4px; 8 box-shadow: 2px 2px 5px 0px rgb(255, 255, 255), -2px -2px 5px -2px rgb(0, 0, 0); 9} 10 11.loader .dots-container { 12 width: 100%; 13 height: 100%; 14 position: relative; 15} 16 17.loader .dots-container .dot-row { 18 position: absolute; 19 top: 50%; 20 transform: translateY(-50%) rotate(0deg); 21 transform-origin: right center; 22 width: 50%; 23 height: 5px; 24 display: flex; 25 align-items: center; 26 justify-content: space-between; 27} 28 29.loader .dots-container .dot-row > * { 30 animation: blink 5s linear infinite; 31} 32 33.loader .dots-container .dot-row .dot { 34 width: 4%; 35 aspect-ratio: 1; 36 background: #8b8b8b; 37 border-radius: 50%; 38} 39 40.loader .dots-container .dot-row:nth-child(1) { 41 transform: translateY(-50%) rotate(0deg); 42} 43 44.loader .dots-container .dot-row:nth-child(1) .dot { 45 animation-delay: 0s; 46} 47 48.loader .dots-container .dot-row:nth-child(2) { 49 transform: translateY(-50%) rotate(8deg); 50} 51 52.loader .dots-container .dot-row:nth-child(2) .dot { 53 animation-delay: 0.1111111111s; 54} 55 56.loader .dots-container .dot-row:nth-child(3) { 57 transform: translateY(-50%) rotate(16deg); 58} 59 60.loader .dots-container .dot-row:nth-child(3) .dot { 61 animation-delay: 0.2222222222s; 62} 63 64.loader .dots-container .dot-row:nth-child(4) { 65 transform: translateY(-50%) rotate(24deg); 66} 67 68.loader .dots-container .dot-row:nth-child(4) .dot { 69 animation-delay: 0.3333333333s; 70} 71 72.loader .dots-container .dot-row:nth-child(5) { 73 transform: translateY(-50%) rotate(32deg); 74} 75 76.loader .dots-container .dot-row:nth-child(5) .dot { 77 animation-delay: 0.4444444444s; 78} 79 80.loader .dots-container .dot-row:nth-child(6) { 81 transform: translateY(-50%) rotate(40deg); 82} 83 84.loader .dots-container .dot-row:nth-child(6) .dot { 85 animation-delay: 0.5555555556s; 86} 87 88.loader .dots-container .dot-row:nth-child(7) { 89 transform: translateY(-50%) rotate(48deg); 90} 91 92.loader .dots-container .dot-row:nth-child(7) .dot { 93 animation-delay: 0.6666666667s; 94} 95 96.loader .dots-container .dot-row:nth-child(8) { 97 transform: translateY(-50%) rotate(56deg); 98} 99 100.loader .dots-container .dot-row:nth-child(8) .dot { 101 animation-delay: 0.7777777778s; 102} 103 104.loader .dots-container .dot-row:nth-child(9) { 105 transform: translateY(-50%) rotate(64deg); 106} 107 108.loader .dots-container .dot-row:nth-child(9) .dot { 109 animation-delay: 0.8888888889s; 110} 111 112.loader .dots-container .dot-row:nth-child(10) { 113 transform: translateY(-50%) rotate(72deg); 114} 115 116.loader .dots-container .dot-row:nth-child(10) .dot { 117 animation-delay: 1s; 118} 119 120.loader .dots-container .dot-row:nth-child(11) { 121 transform: translateY(-50%) rotate(80deg); 122} 123 124.loader .dots-container .dot-row:nth-child(11) .dot { 125 animation-delay: 1.1111111111s; 126} 127 128.loader .dots-container .dot-row:nth-child(12) { 129 transform: translateY(-50%) rotate(88deg); 130} 131 132.loader .dots-container .dot-row:nth-child(12) .dot { 133 animation-delay: 1.2222222222s; 134} 135 136.loader .dots-container .dot-row:nth-child(13) { 137 transform: translateY(-50%) rotate(96deg); 138} 139 140.loader .dots-container .dot-row:nth-child(13) .dot { 141 animation-delay: 1.3333333333s; 142} 143 144.loader .dots-container .dot-row:nth-child(14) { 145 transform: translateY(-50%) rotate(104deg); 146} 147 148.loader .dots-container .dot-row:nth-child(14) .dot { 149 animation-delay: 1.4444444444s; 150} 151 152.loader .dots-container .dot-row:nth-child(15) { 153 transform: translateY(-50%) rotate(112deg); 154} 155 156.loader .dots-container .dot-row:nth-child(15) .dot { 157 animation-delay: 1.5555555556s; 158} 159 160.loader .dots-container .dot-row:nth-child(16) { 161 transform: translateY(-50%) rotate(120deg); 162} 163 164.loader .dots-container .dot-row:nth-child(16) .dot { 165 animation-delay: 1.6666666667s; 166} 167 168.loader .dots-container .dot-row:nth-child(17) { 169 transform: translateY(-50%) rotate(128deg); 170} 171 172.loader .dots-container .dot-row:nth-child(17) .dot { 173 animation-delay: 1.7777777778s; 174} 175 176.loader .dots-container .dot-row:nth-child(18) { 177 transform: translateY(-50%) rotate(136deg); 178} 179 180.loader .dots-container .dot-row:nth-child(18) .dot { 181 animation-delay: 1.8888888889s; 182} 183 184.loader .dots-container .dot-row:nth-child(19) { 185 transform: translateY(-50%) rotate(144deg); 186} 187 188.loader .dots-container .dot-row:nth-child(19) .dot { 189 animation-delay: 2s; 190} 191 192.loader .dots-container .dot-row:nth-child(20) { 193 transform: translateY(-50%) rotate(152deg); 194} 195 196.loader .dots-container .dot-row:nth-child(20) .dot { 197 animation-delay: 2.1111111111s; 198} 199 200.loader .dots-container .dot-row:nth-child(21) { 201 transform: translateY(-50%) rotate(160deg); 202} 203 204.loader .dots-container .dot-row:nth-child(21) .dot { 205 animation-delay: 2.2222222222s; 206} 207 208.loader .dots-container .dot-row:nth-child(22) { 209 transform: translateY(-50%) rotate(168deg); 210} 211 212.loader .dots-container .dot-row:nth-child(22) .dot { 213 animation-delay: 2.3333333333s; 214} 215 216.loader .dots-container .dot-row:nth-child(23) { 217 transform: translateY(-50%) rotate(176deg); 218} 219 220.loader .dots-container .dot-row:nth-child(23) .dot { 221 animation-delay: 2.4444444444s; 222} 223 224.loader .dots-container .dot-row:nth-child(24) { 225 transform: translateY(-50%) rotate(184deg); 226} 227 228.loader .dots-container .dot-row:nth-child(24) .dot { 229 animation-delay: 2.5555555556s; 230} 231 232.loader .dots-container .dot-row:nth-child(25) { 233 transform: translateY(-50%) rotate(192deg); 234} 235 236.loader .dots-container .dot-row:nth-child(25) .dot { 237 animation-delay: 2.6666666667s; 238} 239 240.loader .dots-container .dot-row:nth-child(26) { 241 transform: translateY(-50%) rotate(200deg); 242} 243 244.loader .dots-container .dot-row:nth-child(26) .dot { 245 animation-delay: 2.7777777778s; 246} 247 248.loader .dots-container .dot-row:nth-child(27) { 249 transform: translateY(-50%) rotate(208deg); 250} 251 252.loader .dots-container .dot-row:nth-child(27) .dot { 253 animation-delay: 2.8888888889s; 254} 255 256.loader .dots-container .dot-row:nth-child(28) { 257 transform: translateY(-50%) rotate(216deg); 258} 259 260.loader .dots-container .dot-row:nth-child(28) .dot { 261 animation-delay: 3s; 262} 263 264.loader .dots-container .dot-row:nth-child(29) { 265 transform: translateY(-50%) rotate(224deg); 266} 267 268.loader .dots-container .dot-row:nth-child(29) .dot { 269 animation-delay: 3.1111111111s; 270} 271 272.loader .dots-container .dot-row:nth-child(30) { 273 transform: translateY(-50%) rotate(232deg); 274} 275 276.loader .dots-container .dot-row:nth-child(30) .dot { 277 animation-delay: 3.2222222222s; 278} 279 280.loader .dots-container .dot-row:nth-child(31) { 281 transform: translateY(-50%) rotate(240deg); 282} 283 284.loader .dots-container .dot-row:nth-child(31) .dot { 285 animation-delay: 3.3333333333s; 286} 287 288.loader .dots-container .dot-row:nth-child(32) { 289 transform: translateY(-50%) rotate(248deg); 290} 291 292.loader .dots-container .dot-row:nth-child(32) .dot { 293 animation-delay: 3.4444444444s; 294} 295 296.loader .dots-container .dot-row:nth-child(33) { 297 transform: translateY(-50%) rotate(256deg); 298} 299 300.loader .dots-container .dot-row:nth-child(33) .dot { 301 animation-delay: 3.5555555556s; 302} 303 304.loader .dots-container .dot-row:nth-child(34) { 305 transform: translateY(-50%) rotate(264deg); 306} 307 308.loader .dots-container .dot-row:nth-child(34) .dot { 309 animation-delay: 3.6666666667s; 310} 311 312.loader .dots-container .dot-row:nth-child(35) { 313 transform: translateY(-50%) rotate(272deg); 314} 315 316.loader .dots-container .dot-row:nth-child(35) .dot { 317 animation-delay: 3.7777777778s; 318} 319 320.loader .dots-container .dot-row:nth-child(36) { 321 transform: translateY(-50%) rotate(280deg); 322} 323 324.loader .dots-container .dot-row:nth-child(36) .dot { 325 animation-delay: 3.8888888889s; 326} 327 328.loader .dots-container .dot-row:nth-child(37) { 329 transform: translateY(-50%) rotate(288deg); 330} 331 332.loader .dots-container .dot-row:nth-child(37) .dot { 333 animation-delay: 4s; 334} 335 336.loader .dots-container .dot-row:nth-child(38) { 337 transform: translateY(-50%) rotate(296deg); 338} 339 340.loader .dots-container .dot-row:nth-child(38) .dot { 341 animation-delay: 4.1111111111s; 342} 343 344.loader .dots-container .dot-row:nth-child(39) { 345 transform: translateY(-50%) rotate(304deg); 346} 347 348.loader .dots-container .dot-row:nth-child(39) .dot { 349 animation-delay: 4.2222222222s; 350} 351 352.loader .dots-container .dot-row:nth-child(40) { 353 transform: translateY(-50%) rotate(312deg); 354} 355 356.loader .dots-container .dot-row:nth-child(40) .dot { 357 animation-delay: 4.3333333333s; 358} 359 360.loader .dots-container .dot-row:nth-child(41) { 361 transform: translateY(-50%) rotate(320deg); 362} 363 364.loader .dots-container .dot-row:nth-child(41) .dot { 365 animation-delay: 4.4444444444s; 366} 367 368.loader .dots-container .dot-row:nth-child(42) { 369 transform: translateY(-50%) rotate(328deg); 370} 371 372.loader .dots-container .dot-row:nth-child(42) .dot { 373 animation-delay: 4.5555555556s; 374} 375 376.loader .dots-container .dot-row:nth-child(43) { 377 transform: translateY(-50%) rotate(336deg); 378} 379 380.loader .dots-container .dot-row:nth-child(43) .dot { 381 animation-delay: 4.6666666667s; 382} 383 384.loader .dots-container .dot-row:nth-child(44) { 385 transform: translateY(-50%) rotate(344deg); 386} 387 388.loader .dots-container .dot-row:nth-child(44) .dot { 389 animation-delay: 4.7777777778s; 390} 391 392.loader .dots-container .dot-row:nth-child(45) { 393 transform: translateY(-50%) rotate(352deg); 394} 395 396.loader .dots-container .dot-row:nth-child(45) .dot { 397 animation-delay: 4.8888888889s; 398} 399 400.loader .center-div { 401 position: absolute; 402 top: 50%; 403 left: 50%; 404 transform: translate(-50%, -50%); 405 width: 36%; 406 aspect-ratio: 1; 407 border-radius: 50%; 408 display: grid; 409 place-content: center; 410 background: linear-gradient(135deg, rgb(130, 130, 130) 0%, rgb(73, 73, 73) 100%); 411 box-shadow: rgba(39, 39, 39, 0.3) 8px 8px 5px -5px, rgba(39, 39, 39, 0.5) 8px 8px 10px 0px; 412 border-right: 1px solid rgb(63, 63, 63); 413 border-bottom: 1px solid rgb(63, 63, 63); 414} 415 416.loader .center-div .svg { 417 width: 15px; 418 aspect-ratio: 1; 419 fill: rgba(0, 0, 0, 0.293); 420} 421 422.loader .glass { 423 position: absolute; 424 height: 50%; 425 width: 80%; 426 top: 0; 427 left: 50%; 428 transform: translateX(-50%) rotate(-45deg); 429 transform-origin: bottom center; 430 background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.879) 100%); 431 border-radius: inherit; 432 border-radius: 51% 49% 51% 49%/59% 60% 40% 41%; 433} 434 435@keyframes blink { 436 0% { 437 background: white; 438 box-shadow: 0px 0px 2px rgb(255, 255, 255); 439 } 440 441 10% { 442 background: white; 443 box-shadow: 0px 0px 2px rgb(255, 255, 255); 444 } 445 446 20% { 447 background: white; 448 box-shadow: 0px 0px 2px rgb(255, 255, 255); 449 } 450 451 21% { 452 background: grey; 453 } 454}
1K views
1K views
Variations
1 MIT License