我们要把progress改变成上面这种模样。
代码如下：
|
progress可以设置width，height，border等常用属性。
对于IE10+，firefox浏览器，可以用background设置进度条的背景色。
对于webkit浏览器，使用::-webkit-progress-bar设置进度条的背景色。
对于IE10+，用::-ms-fill设置进度条完成进度的背景色。
对于firefox，用::-moz-progress-bar设置进度条完成进度的背景色。
对于webkit浏览器，使用::-webkit-progress-value设置进度条完成进度的背景色。
注意：::-webkit-progress-bar设置的是进度条的背景色，而::-moz-progres-bar设置的是进度条完成进度的背景色，正好是反着的。
而且对于webkit浏览器，在IOS上要用-wekbit-appearance:none来清空progress的默认样式，才能让背景色，进度颜色起作用。
点击这里，查看自定义progress进度条样式。
html5 progress结语
我们可以在ajax2上传文件中，upload.onprogress事件回调中使用progress可以很方便的显示文件上传的进度。也可以在FileReader预览图片中使用的onprogress事件中使用progress元素显示图片读取的进度。
本文讲解了HTML5 progress进度条，更多相关内容请关注php中文网。
相关推荐：
简易 PHP+MySQL 分页类
两个不用递归的树形数组构造函数
HTML转Excel，并实现打印，下载功能
以上就是HTML5 progress进度条详解的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
HTML5的geolocation地理位置定位api使用方法详解
HTML5之pushstate和popstate操作history无刷新改变当前url的详细介绍
HTML5中返回当前音频/视频的url的属性currentsrc
HTML5 webworkers防止浏览器假死的示例代码分享
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
