使用HTML5“progress”元素

05-07 次

标签 html5 progress

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

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>元素在页面上具有默认的尺寸大小，我们可以通过width和height属性来改变它的默认大小：

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属性来渲染。