0

ボタンにプログレスバーのようなアニメーションを追加するには?

loadingクラスがボタンに追加されると、背景の位置が無限ループで右に移動する必要があります。進行状況バーの読み込みのように

ここでの問題は、位置が異なるテンポで移動することです

コード

<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;
}

フィドル

http://jsfiddle.net/KP2W4/

4

1 に答える 1

2

次のように、x 軸上で背景画像を移動するキーフレーム アニメーションが必要です。

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

jsフィドル

于 2013-05-03T11:27:41.047 に答える