[js]プログレスバーを動かす

はじめて触るから薄い内容。

これ
js（jQuery）で操作してみる
アニメーションについて
装飾周りについて

これ

<progress value="40" max="100">40％</progress>

maxは最大値、valueは値。

要素で挟んであるパーセントのやつは、別になくても表示的に問題はない。

アクセシビリティ的に、inputよろしくlabelも使う感じ。

<label>進捗</label>
<progress value="40" max="100">40％</progress>

<label>
    進捗
    <progress value="40" max="100">40％</progress>
</label>

js（jQuery）で操作してみる

valueを変えたらいい。
例えばクリックしたら増加、ってやるとこうなる。

<progress id="progress" value="40" max="100"></progress>
<button type="button" id="progress_btn">click</button>

$(function(){
    $('button#progress_btn').on('click',function(){
        valNum = Number($('progress#progress').attr('value')) + 10;
        $('progress#progress').attr('value',valNum);
    })
})

現在の値を取得して、それを足すなり引くなりしたのを上書きする。

アニメーションについて

<progress>自体にアニメーション機能はない。

アニメーションさせたければjsでどうにかすることになる。

そうなると、例えば数値aから数値bまでを一定数刻みで更新しまくるみたいなことになる。

$(function(){
    $('button#progress_btn').on('click',function(){
        valNum01 = Number($('progress#progress').attr('value'));
        valNum02 = valNum01 + 10;
        const countUp = () =>{
            valNum03 = valNum01++;
            $('progress#progress').attr('value',valNum03);
        }
        const intervalId = setInterval(() =>{
            countUp();
            if(valNum03 > valNum02){
                clearInterval(intervalId);
            }}, 50);
    })
})

setInterval()の値をいじれば更新頻度は早くなるので、実質的にプログレスバーはアニメーションする。

それはいいんだけど、一定速度なので気持ち悪い。欲が出てしまう。

イージングとか。
軽く調べたらあるっぽいんだけど、自作の手間がだるい。

もういっそのこと、アニメーションしなくていいんじゃないですかね。

装飾周りについて

::-webkitとかの疑似要素で指定できるらしい。

ということは統一されてないということで、ややこしいことになる。

まあなんていうか、<progress>を扱いたいなら素材の良さを活かすべきで、独自色を出したいなら<div>とかで組んで擬似的にプログレスバーを作るのがいいんじゃないですかね。