添加进度条

Question

我有以下功能在上传后显示图像文件。

<p id="append_image"><div class="append_image"></div></p>

jQuery.ajax({
    type: "POST",
    dataType: "json",
    url: upload_image.ajax_url, 
    data: formdata,
    contentType:false,
    processData:false,
    beforeSend : function(){
        jQuery('#append_image').html('Uploading...');
    },
    success : function(data){
        jQuery('#append_image').html('');
        //Here shows the image that is uploaded.
        }
        jQuery('.append_image').append(append_html);
    }
 });

现在，它显示"Uploading..."，但我想显示进度条，我不确定如何。

我想使用Google material lite版本：

<div id="p1" class="mdl-progress mdl-js-progress"></div>
 <script>
  document.querySelector('#p1').addEventListener('mdl-componentupgraded',   function() {
    this.MaterialProgress.setProgress(44);
  });
</script>

有谁知道如何在这里添加进度条？

Answer 1

使用此：

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

<强> CSS：

.progressContainer{
    height:10px;
    border:#ccc 1px solid;
    border-radius:10px;
}
.progress{
    width:10%;
    background:green;    
    height: 10px;
    border-radius: 10px;
    transition: all .5s ease-out 0s;
    -o-transition: all .5s ease-out 0s;
    -webkit-transition: all .5s ease-out 0s;
    -moz-transition: all .5s ease-out 0s;
    -ms-transition: all .5s ease-out 0s;
}

在此之后，您可以通过更改jQuery代码中.progress的宽度来移动进度条。

请参阅 fiddle 。