0

CSS3 と CSS3 アニメーションを使用して作成したこのローダーがあります。ただし、jQuery を使用して実際の読み込み関数を作成したいと思います (秒数によって異なります)。

例、欲しいのでexに設定できます。バーを完全にロードするのに 30 秒。

現在、私はこれを持っています:

        <div id="loader">
            <div id="bar"></div>
        </div>  
#bar {
    height: 20px;
    width: 0px;

    background: -webkit-linear-gradient(top, #4892D9, #1960BC);
    background: -moz-linear-gradient(top, #4892D9, #1960BC);
    background: -ms-linear-gradient(top, #4892D9, #1960BC);
    background: -o-linear-gradient(top, #4892D9, #1960BC);
    background: linear-gradient(top, #4892D9, #1960BC);

    -webkit-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    -moz-box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    box-shadow: 0 0 2px #000, inset 0 -7px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(63,137,205, 0.4);
    -webkit-animation: progress 30s linear forwards;
    -moz-animation: progress 2s linear forwards;
    -ms-animation: progress 2s linear forwards;
    animation: progress 2s linear forwards;
}

iFrame が読み込まれたら、プログレス バーを開始します。

    $('#iframe').load(function() {

    //Code to start animation here
    });

ご覧のとおり、#bar の css3 アニメーションは "2s" に設定されています。この数値をjQueryで変更できるようにしたいです。どうやってやるの?

4

1 に答える 1