在这篇文章中，我们将讨论如何在文档中添加此元素，如何与CSS 样式它和动画进度条计。

让我们开始吧。

基本用法

进度条可以用<progress>添加； 进度值由value ， min和max属性确定，如下所示。

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

由于这是一个本机进度栏，因此呈现方式因平台而异。 以下是Windows和OSX中本机进度栏的外观。

现在，让我们尝试设计此进度条的样式，以使其在所有平台上具有一致或相似的外观。

样式进度栏

在样式表中，我们实际上可以使用元素选择器定位并向<progress>元素添加样式规则。 在此示例中，我们更改了背景颜色，删除了边框线，并通过在边框高度的一半处添加边框半径来使其变圆。

progress {
	background-color: #f3f3f3;
	border: 0;
	height: 18px;
	border-radius: 9px;
}

但是，每个浏览器对此的处理方式都有些不同。

在Firefox中 ，样式会影响进度栏，而进度表/值不会受到影响。

在Chrome和Safari中 ，它将从平台上删除本机样式和演示文稿，并将其替换为Webkit样式表 ，上述样式（至少目前不会）将不被应用。

因此，在这些情况下，我们需要更多解决方法。

在Chrome和Safari中 ，progress元素是以这种方式翻译的。

<progress>
    ┗ <div> ::-webkit-progress-bar
         ┗ <div>::-webkit-progress-value

因此，要更改这些浏览器中的进度条和进度值样式，我们需要添加这些Webkit pseudo-classes 。

progress::-webkit-progress-bar {
	/* style rules */
}
progress::-webkit-progress-value {
	/* style rules */
}

Firefox也有其特殊的伪类，即::-moz-progress-bar。 与Chrome和Safari不同，Firefox中的伪类引用进度表/值。

progress::-moz-progress-bar {
	/* style rules */
}

总而言之，这些是样式HTML5进度栏的全部选择器。

progress {
	/* style rules */
}
progress::-webkit-progress-bar {
	/* style rules */
}
progress::-webkit-progress-value {
	/* style rules */
}
progress::-moz-progress-bar {
	/* style rules */
}

动画化进度

接下来，我们将看到如何为进度条设置动画。 通常，进度栏会随着任务的进行从左向右展开。

这个想法是，进度条将从0展开，并在达到最大值后停止。 我们还将在显示数值时显示其数值。 以下是HTML结构。

<progress id="progressbar" value="0" max="100"></progress>

在此示例中，我们将使用jQuery动画化进度栏。 因此，我们也不应忘记像这样插入jQuery。

<script src="js/jquery.js" type="text/javascript"></script>

然后，我们添加脚本以使进度条扩展。 首先，我们将进度条元素，进度条值以及最大值和时间范围存储在变量中。

var progressbar = $('#progressbar'),
	max = progressbar.attr('max'),
	value = progressbar.val(),
	time = (1000/max)*5;

接下来，我们创建一个存储动画功能的变量。 在这个例子中，我们称变量loading 。

var loading = function() {

}

在上面的函数中，我们设置进度间隔。 我们将在每个时间范围内将值增加1您可以增加该值以使进度更快地运行。

value += 1;

然后，将结果添加到进度条。

addValue = progressbar.val(value);

我们还将在进度条旁边显示内部的值。

$('.progress-value').html(value + '%');

接下来，我们创建一个新函数来运行动画函数。

setInterval(function() {
    loading();
}, time);

此时，动画已经开始起作用。 但是，该值将无限增加。 因此，我们需要创建一个条件语句，以使动画在达到最大值时停止播放。

首先，让我们将上述函数存储在这样的变量中。

var animate = setInterval(function() {
    loading();
}, time);

并且，在loading变量内，我们添加条件语句，如下所示。

if (value == max) {
    clearInterval(animate);
}

上面的脚本指出，一旦值等于最大值，请清除间隔，这将停止动画功能。

就是这样，这里是制作进度条动画的所有代码。

$(document).ready(function() {
	var progressbar = $('#progressbar'),
		max = progressbar.attr('max'),
		time = (1000/max)*5,	
	    value = progressbar.val();

	var loading = function() {
	    value += 1;
	    addValue = progressbar.val(value);
	    
	    $('.progress-value').html(value + '%');

	    if (value == max) {
	        clearInterval(animate);			           
	    }
	};

	var animate = setInterval(function() {
	    loading();
	}, time);
};

您可以查看演示并从以下链接下载源。

• 观看演示
• 下载源

浏览器支持

根据CanIUse.com的说法 ，以下浏览器完全支持HTML5进度元素：Firefox 16 +，Chrome 8 +，Safari 6+和Opera 11+。

进一步参考

以下是一些很好的参考资料，可以进一步挖掘该元素。

• 深度跨浏览器HTML5进度栏 –用户代理人
• HTML5文件上传进度 – FileZilla项目
• HTML5进度文档 – W3.org

翻译自: https://www.hongkiat.com/blog/html5-progress-bar/