Loader by forgingdestiny
#e8e8e8
1/* Container for the loader */ 2.loader { 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 height: 10em; 7} 8 9/* Circle elements */ 10.circle { 11 width: 1em; 12 height: 1em; 13 margin: 0 0.25em; 14 border-radius: 50%; 15 background-color: #a8d5e2; 16 animation: wave 1.5s infinite ease-in-out; 17 transition: background-color 0.3s ease; 18} 19 20/* Animation */ 21@keyframes wave { 22 0%, 100% { 23 transform: translateY(0); 24 } 25 26 50% { 27 transform: translateY(-1em); 28 } 29} 30 31/* Delay for each circle */ 32.circle:nth-child(1) { 33 animation-delay: 0s; 34} 35 36.circle:nth-child(2) { 37 animation-delay: 0.2s; 38} 39 40.circle:nth-child(3) { 41 animation-delay: 0.4s; 42} 43 44.circle:nth-child(4) { 45 animation-delay: 0.6s; 46} 47 48.circle:nth-child(5) { 49 animation-delay: 0.8s; 50} 51
425 views
425 views
MIT License