如何以百分比JQuery,HTML和CSS显示进度条？

Question

我在JQuery中创建了进度条,它应该显示进度.当前代码仅显示百分比值.我希望看到我的进度条从0%开始,然后上升到100%.此外,我希望我的价值在进度条的中心.这是我目前的代码:

xhr: function(){
    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(evt){
        if(evt.lengthComputable){
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            $('.progress').text(percentComplete + '%');

            if(percentComplete === 100){
                $('.progress').addClass('hide');
                console.log("Successfully uploaded!");
            }
        }
    },false);
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
            $('.progress').text(percentComplete + '%');
        }
    }, false);
    return xhr;
}

HTML:

    <div class="progress"></div>

CSS:

    .progress {
        margin-top: 10px;
        display: block;
        text-align: center;
        width: 300px;
        height: 20px;
        background: #a3bfcc;
        transition: width .3s;
    }
    .progress.hide {
        opacity: 0;
        transition: opacity 1.3s;
    }

此外,我不确定我的JQuery部分是否应该只有一个侦听器.如果有人可以帮助解决这个问题,请告诉我.

Answer 1

您可以使用html5 progress元素

<progress max = "100" value = "50"></progress>

这将为您提供50%的完整进度条,可以使用css和javascript轻松设置样式和动画.

在这里阅读更多内容:https: //css-tricks.com/html5-progress-element/