html5学习笔记(<progress>)

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>

结果：