Loaded with JS

progress bar

by secretgspot

HTML

<section id = "loadingSection">
    <p>Loading <span id="loadText">0%</span></p>
    <div id="bar" value="0" max="100" >
        <span id="download">
        </span>
    </div>
</section>

CSS

#loadingSection{
    position:relative;
    top:160px;
    left: 30px;
}

#bar {
    display: block;
    width: 400px;
    height: 15px;
    background-color: #f5f5f5;
}

#bar span {
    display: block;
    width: 0;
    height: 15px;
    background-color: #ff3366;
} 


#download {
    float: left;
    margin-right: 10px;
}

p {
    font-family: Arial;
    font-weight: bold;
    font-size:12px;
    
}

#loadText {
    font-size:14px;
}

JavaScript

// forked from TomM's "アニメーションするプログレスバー" http://jsdo.it/TomM/ex07
//click action
$(document).ready(function() {
    var bar = document.getElementById('bar'),
        fallback = document.getElementById('download'),
        loaded = 0;

    var load = function() {
        loaded ++;
        bar.value = loaded;
    
        $('#loadText').html(loaded + '%');
    $('#bar span').css('width', loaded + '%');
    
    //100%に達したら、アニメーションを開始してプログレスバー及び表示文字は消える。
        if (loaded >= 100) {
        clearInterval(beginLoad);
        setTimeout(function(){
            $("#loadingSection").animate({"opacity":0},function(){
        $(this).fadeOut('slow');
        });
        },200);

        }
    };
    //load関数を実行してローディングを開始する。
    var beginLoad = setInterval(function() {
        load();
    }, 50);

});