HTML5 <progress> 标签
浏览器支持
IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。
注释:IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。
标签定义及使用说明
<progress> 标签定义运行中的任务进度(进程)。
提示和注释
提示:请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或相关的查询结果)。表示度量衡,请使用 <meter> 标签代替。
以上是菜鸟教程说明。
先看下google的翻译
如图
然后通过和MDN上的说明相印证得出
HTML <progress>标签表示任务的完成进度,通常显示为进度条。
例子:
<progress max="100" value="10"></progress>
结果:
结论:
<progress>的max属性(如果存在)必须具有大于零的值并且是有效的浮点数。默认值是1。
<progress>的value属性,它必须是0 max到0 之间的有效浮点数,如果max省略,则在0和1之间。如果没有value属性,进度条是不确定的; 这表明活动正在进行,没有迹象表明预计会花多长时间。
一般来说 进度条是要动起来的,所以和javascript在一起使用意义更大
例子:
<progress class="vert" id="pro" max="100" value="10"></progress> <button onclick="prosettimeout();">开始</button> <script type="text/javascript"> function prosettimeout(){ var provalue=$("#pro").val(); provalue++; if(provalue>100){ return false; } $("#pro").val(provalue); setTimeout("prosettimeout()",100); } </script>
结果:
注:最小值始终为0,并且该min属性不允许用于progress元素。您可以使用-moz-orientCSS属性来指定进度条应该水平呈现(默认)还是垂直呈现。
关于-moz-orient CSS属性
值1)inline
该元素的渲染方向与文本的轴相同:水平方向为水平写入方式,垂直方向为垂直写入方式。
值2)block
该元素与文本的轴垂直呈现:垂直写入水平模式,水平写入垂直写入模式。
值3)horizontal
该元素被水平渲染。
值4)vertical
该元素被垂直渲染。
例子:
<progress class="vert" id="pro" max="100" value="10"></progress> <style> .vert{ -moz-orient: vertical; width: 16px; height: 150px; } </style>
结果:
chrome下
firfox下
注意:这个-moz-orient CSS属性 只有火狐支持!
关于:indeterminate伪类(不确定)
在<progress>中去掉value属性 就是:indeterminate伪类的目标状态
在进度条不确定时增加样式:
例子:
<progress class="vert" id="pro" max="100"></progress> 注意 value属性被删除了 progress 就在不确定状态 <style> progress:indeterminate{ opacity: 0.5; box-shadow: 0 0 2px 1px red; } </style>
结果: