WebUploader进度条不能显示(因为css里面没有，得自己写)

 

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/webuploader.js"></script>

 

// 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');
        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
      	 }
        $li.find('p.state').text('上传中');
        $percent.css('width', percentage * 100 + '%');
    });

.progress { 
height: 20px; 
margin-bottom: 20px; 
overflow: hidden; 
background-color: #f5f5f5; 
border-radius: 4px; 
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
} 
.progress.active .progress-bar { 
-webkit-animation: progress-bar-stripes 2s linear infinite; 
animation: progress-bar-stripes 2s linear infinite; 
}
 
.progress-striped .progress-bar { 
background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); 
background-size: 40px 40px; 
} 
.progress-bar { 
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%); 
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%); 
background-repeat: repeat-x; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0); 
} 
.progress-bar { 
float: left; 
height: 100%; 
font-size: 12px; 
line-height: 20px; 
color: #fff; 
text-align: center; 
background-color: #428bca; 
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); 
transition: width .6s ease; 
}