This post is saved as a draft.
#212121
1@keyframes bounce { 2 0%, 80%, 100% { 3 transform: scale(0); 4 opacity: 0; 5 } 6 7 40% { 8 transform: scale(1); 9 opacity: 1; 10 } 11} 12 13.loader { 14 display: flex; 15 flex-wrap: wrap; 16 justify-content: center; 17 align-items: center; 18 width: 100px; 19 height: 100px; 20 position: absolute; 21 top: 50%; 22 left: 50%; 23 transform: translate(-50%, -50%); 24} 25 26.circle { 27 width: 20px; 28 height: 20px; 29 background-color: rgb(83, 82, 82); 30 border-radius: 50%; 31 margin: 2px; 32 animation: bounce 1.2s infinite ease-in-out; 33} 34 35.circle:nth-child(2) { 36 animation-delay: -0.1s; 37} 38 39.circle:nth-child(3) { 40 animation-delay: -0.2s; 41} 42 43.circle:nth-child(4) { 44 animation-delay: -0.3s; 45} 46 47.circle:nth-child(5) { 48 animation-delay: -0.4s; 49} 50 51.circle:nth-child(6) { 52 animation-delay: -0.5s; 53} 54 55.circle:nth-child(7) { 56 animation-delay: -0.6s; 57} 58 59.circle:nth-child(8) { 60 animation-delay: -0.7s; 61} 62 63.circle:nth-child(9) { 64 animation-delay: -0.8s; 65} 66 67.circle:nth-child(10) { 68 animation-delay: -0.9s; 69}
Variation of aloader
Variation of aloader