This post is saved as a draft.
#e8e8e8
1.loader { 2 height: 50px; 3 width: 20rem; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 gap: 15px; 8} 9 10.dot-two { 11 background-color: black; 12 height: 30px; 13 width: 30px; 14 border-radius: 50%; 15 padding: 4px; 16 color: white; 17} 18 19.dot-one, 20.dot-three { 21 background-color: black; 22 height: 30px; 23 width: 20px; 24 border-radius: 50%; 25 text-align: center; 26 animation: flap-wings 1s infinite ease-in-out; 27} 28 29.dot-two { 30 position: relative; 31 height: 30px; 32 width: 30px; 33 border-radius: 50%; 34 background-color: black; 35 animation: flap-wings 1s infinite ease-in-out; 36 animation-delay: 0.1s; 37} 38 39.dot-two::before, 40.dot-two::after { 41 content: ""; 42 position: absolute; 43 background-color: black; 44} 45 46.dot-two::before { 47 height: 20px; 48 width: 10px; 49 bottom: 20px; 50 left: 1px; 51 border-radius: 50% 50% 0 0; 52 transform: rotate(-20deg); 53} 54 55.dot-two::after { 56 height: 20px; 57 width: 10px; 58 bottom: 20px; 59 left: 19px; 60 transform: rotate(20deg); 61 border-radius: 50% 50% 0 0; 62} 63 64.dot-one::before, 65.dot-one::after, 66.dot-three::before, 67.dot-three::after { 68 content: ""; 69 position: absolute; 70 background-color: white; 71} 72 73.dot-one::before, 74.dot-three::before { 75 height: 30px; 76 width: 20px; 77 top: 10px; 78 left: 0; 79 background-color: #e8e8e8; 80 /*chnage this if u need dark mode to #212121 if need light mode #e8e8e8*/ 81 border-radius: 50% 50% 0 0; 82} 83 84@keyframes flap-wings { 85 0%, 86 100% { 87 transform: translateY(0); 88 } 89 90 50% { 91 transform: translateY(-20px); 92 } 93}
Variation of aloader
Variation of aloader