css backgorund position animation infinity -

how add progressbar-like animation on button?

when loading class added button background position should move right in infinite loop.. progress bar loading

the problem here position move in different tempo

code

<button class="loading">loooong text on button</button><br><br> <button class="loading">short</button>  @keyframes animation_loading {     { background-position: 0 0; }     { background-position: 25px 0; } }  button.loading {     background-image:url(//www.dynaccount.com/tmp.png);     animation:animation_loading 0.5s linear infinite; } 

fiddle

http://jsfiddle.net/kp2w4/

you need keyframe animation moves background image on x-axis this:

@keyframes loading{     0% {         background-position: 0 0;     }     100% {         background-position: -100% 0;     } } 

jsfiddle