css background position animation infinity

Question

How to add a progressbar-like animation on a button?

When the loading class is added to the button the background position should move to the right in an infinite loop.. Like a progress bar loading

The problem here is that the position move in different tempo

code

<button class="loading">Loooong text on button</button><br><br>
<button class="loading">Short</button>

@keyframes animation_loading {
    from { background-position: 0 0; }
    to { 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/

Answer 1

You just need a keyframe animation which moves the background image on the x-axis like this:

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

jsFiddle