当前位置主页 > 资料库 > 前端教程 > 使用HTML5“progress”元素

使用HTML5“progress”元素

2015-05-07

当我们在网页上上传一个文件,提交一个表单,观看一段视频等的时候,作为良好的用户体验,我们都需要使用一个进度条来提示用户当前应用的进度。

HTML5为我们提供了一个<progress>元素来显示一个进度条。和其他HTML5元素一样,<progress>元素能使用CSS和javascript来增强它的外观和功能。

progress元素和meter元素的区别

<progress>元素和<meter>元素经常会被混淆。它们之间的区别主要有以下两点:

  • <progress>元素用于显示某个特定任务的时间进度。这个任务的时间上限是可以确定的值,如播放一段音乐的时间;或者是不可确定的值,如上传一个文件到服务器上。<progress>元素的最大值在元素显示时可能是不确定的。例如,完成一个表单提交所需要的进度条。
  • <meter>元素的不同之处在于,它的最小值和最大值必须是确定的。

另外一个区别是,<progress>元素的最小值可以是0。而<meter>元素的最小值必须是一个浮点数,包括负数,可以想象一下温度计的刻度。

使用progress元素

<progress>元素非常简单,它是一个标准的关闭标签元素。

<progress></progress>                                
                            

上面的代码会创建一个不确定的进度条。由于<progress>的值是不确定的,它会在支持该元素的浏览器中处于“waiting”或“working”的动画状态。动画的样式取决于浏览器。结果如下面的样子。

我们可以为它添加一个上限值,但是动画效果不会改变。

<progress max="100"></progress>                                
                            

我们可以通过value属性来为它设置一个当前值:

<progress value="10" max="100"></progress>                                
                            

这时,<progress>元素有了明确的值,它不会在执行动画。

需要注意的是,<progress>元素是一个内联元素。例如下面的例子:

我们已经完成这个项目进度的50%:0%100%

在有效的HTML5代码中,虽然可能会在表单中使用<progress>,但是你不可以将<label>元素和<progress>元素一起使用。用户不能和<progress>元素进行互动:它是一个“报告”元素,用户不需要为它输入信息,因此不需要<label>元素。

我们可以使用<output>元素来为<progress>显示一个值。例如:

<progress min="0" max="10000" value="5012" id="funding" onchange="pledgeUpdate"></progress>
<output for="funding" id="totalDonations">0</output>                                
                            
我们已经完成这个项目进度的50%
当前进度:
50%

我们可以使用javascript来为<progress>动态赋值:

document.getElementById('funding').value = 555;                                
                            

<progress>元素的默认外观样式取决于浏览器,并且很大程度上依赖于底层的操作系统的UI样式。我们可以通过CSS来自定义<progress>的样式。

自定义progress样式

<progress>元素在页面上具有默认的尺寸大小,我们可以通过widthheight属性来改变它的默认大小:

progress { width: 500px; height: 12px; }                                
                            

在Firefox和IE浏览器中,宽度和高度都是可以改变的。但是在Webkit浏览器中只能改变宽度,而高度不能改变。为了让的它外观可以在Chrome, Safari 和 Opera浏览器中修改,我们需要重置-webkit-appearance属性。

progress { -webkit-appearance: none; width: 500px; height: 12px; }                               
                            

你会发现上面的语句会在Webkit内核浏览器中剔除掉<progress>的所有原生OS样式:进度条会变为绿色,背景是暗灰色的。要在Firefox浏览器得到相同的效果,可以使用下面的方法:

progress { -webkit-appearance: none; -moz-appearance: none; width: 500px; height: 12px; }                                
                            

但是,在Firefox浏览器中得到的结果有所不同:进度条变为蓝色。如果需要他们的外观完全一致,可以添加一些CSS样式:

progress {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 500px; height: 12px;
    background-color: #888; border: none;
    color: green;
}   
    progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
    background-color: green;
}
    progress::-moz-progress-bar {
    background-color: green;
}                             
                            

得到的结果如下:

你会发现上面的代码有写重复的地方,这是因为HTML5在使用CSS伪元素选择器时有一些诡异的行为。例如,在Firefox浏览器中,如果一个选择器和其它选择器进行组合,会忽略::-moz-progress-bar伪元素。所以建议在在自定义HTML5进度条的时候,像上面这样单独的写Firefox的样式。

垂直进度条

<progress>元素也可以垂直显示。要实现这种效果的最好的方法是使用CSS transform。另外非常重要的一点是要使用CSS box-sizing: border-box来重置它的盒模型。Mozilla和Webkit你好的浏览器在显示<progress>元素的外观和尺寸上略有不同。

* { -moz-box-sizing: border-box; box-sizing: border-box; }
progress {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: #fff;
    width: 300px; height: 20px;
    border-radius: 10px; border: 5px double #aaa;
    display: block;
    -webkit-transform-origin: center left;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform-origin: center left;
    transform: rotate(-90deg) translateX(-100%);
    margin-left: 1%;
}                                
                            

还可以更进一步的定义它的样式:

progress::-webkit-progress-bar { background: #fff; }
progress::-webkit-progress-value {
    border-radius: 6px;
    background: linear-gradient(90deg, #000,#f00);
}
progress::-ms-fill {
    border-radius: 6px;
    background: linear-gradient(90deg, #000,#f00);}
    progress::-moz-progress-bar {
    border-radius: 6px;
    background: linear-gradient(90deg, #000,#f00);
}                               
                            

得到的结果如下面所示:

从这个例子中我们可以知道:

  • Firefox浏览器使用background属性来渲染<progress>的背景。而Webkit内核的浏览器使用::webkit-progress-bar,IE浏览器使用的是::-ms-fill
  • 进度条的进度显示在Firefox中使用::-moz-progress-bar,在Webkit内核的浏览器中使用webkit-progress-value,在IE10+浏览器中,它的颜色可以使用color属性来渲染。

小结

<progress>是一个非常有用的HTML元素。虽然它在更新值value方面有所欠缺。但是通过js,我们可以修复它的这个缺陷。下一篇文章中,我们会详细介绍容易和它混淆的meter元素。希望这些内容对你有所帮助。

Previous:
上一篇:HTML5“Details”和“Summary”元素介绍
Next:
下一篇:使用HTML5“meter”元素
返回顶部