HTML Progressbar开始加载错误的Jquery

Question

我正在使用html中的进度标记结合javascript和jquery来尝试一些动画。

就目前而言，我的进度条从我的值加载到100％，它应该从0变为我给定的值，条的最大值为100。

我尝试使用以下网站，但我无法找到我做的不同。 http://html5doctor.com/the-progress-element/

我的代码的代码：http://codepen.io/anon/pen/LNQjBL

<div class="col-md-6">
    <h2>Photoshop</h2>
    <h4>Kanalen</h4>
    <progress id="progressbar" value="22" max="100">
    </progress>
    <span class="progress-value">22%</span>
    <h4>Kanalen</h4>
    <progress value="56" max="100">
    </progress>
    <h4>Kanalen</h4>
    <progress value="83" max="100">
    </progress>
    <h4>Kanalen</h4>
    <progress value="15" max="100">
    </progress>
</div>

脚本代码;

$(document).ready(function () {
    if (!Modernizr.meter) {
        alert('Sorry your brower does not support HTML5 progress bar');
    } else {
        var progressbar = $('#progressbar')
            , max = progressbar.attr('max')
            , time = (1000 / max) * 5
            , value = progressbar.val();

        var loading = function () {
            value += 1;
            addValue = progressbar.val(value);

            $('.progress-value').html(value + '%');

            if (value == max) {
                clearInterval(animate);
            }
        };

        var animate = setInterval(function () {
            loading();
        }, time);
    };
});

我在上面添加了一些项目代码;