لودینگ شماره دو
html
css .main{ positon:relative; display:flex; margin-top: 30px; } span{ position:relative; width:10px; height:10px; background-color:black; border-radius:50%; margin:1px; animation:jump .5s linear infinite; } .a{animation:a 1s linear infinite;} .b{animation:b 2s linear infinite;} .c{animation:a 1s linear infinite;} .d{animation:b 2s linear infinite;} .e{animation:a 1s linear infinite;} @keyframes a{ 0%{transform:translateY(0px)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0px)} } @keyframes b{ 0%{transform:translateY(0px)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0px)} }
css
js