CSSとjQueryで作るシンプルなプログレスバー[CSS][js]

作成方法は、適当な画像を作成し、CSSとJavaScriptを設置するだけです。

画像に関しては、サイトに載っている画像でもOKかと思います。以下ソース例です。

サイトに掲載されているHTMLでは、うまく動作しませんでしたので、以下のようなソースが良いと思います。

<div id="meter-ex1" class="meter-wrap" style="cursor: pointer">
    <div class="meter-value" style="background-color: #4DA4F3; width: 0%;">
        <div class="meter-text">
            click me!
        </div>
    </div>
</div>

CSSは下記のようになります。

.meter-wrap{
    position: relative;
}

.meter-wrap, .meter-value, .meter-text {
    /* The width and height of your image */
    width: 155px; height: 30px;
}

.meter-wrap, .meter-value {
    background: #bdbdbd url(/path/to/your-image.png) top left no-repeat;
}
            
.meter-text {
    position: absolute;
    top:0; left:0;

    padding-top: 5px;
                
    color: #fff;
    text-align: center;
    width: 100%;
}

以下が、jQueryのソースです。#meter-ex1か#meter-ex2のどちらかで良いのですが、シンプルなのは、#meter-ex1のほうです。

$(document).ready(function(){
    var ex1running = false;
    var ex2running = false;

    $('#meter-ex1').click(function(){
      if(!ex1running){
        ex1running = true;
        var $this = $(this);
        var count = 0;
        var inter = null;
        function run(){
            count++;
            $this.find('.meter-value').css('width', count+"%");
            $this.find('.meter-text').text(count+"%");
            if(count == 100){
                clearInterval(inter);
                ex1running = false;
            }
        }
        inter = setInterval(run, 50);
      }
    });

    $('#meter-ex2').click(function(){
      if(!ex2running){
        ex2running = true;
        var $this = $(this);
        var gb = 'A4F3';
        var r = 0;
        var inter = null;
        function run(){
            r++;
            var rhex = r.toString(16);
            if(rhex.length == 1) rhex = "0"+rhex;
            var color = "#"+rhex+gb;
            $this.find('.meter-value').css('background-color', color);
            $this.find('.meter-text').text(color);
            if(r == 255){
                clearInterval(inter);
                ex2running = false;
                $this.find('.meter-text').text('click me!');
            }
        }
        inter = setInterval(run, 10);
      }
    });
});