伪元素进度条_使用HTML5进度元素

伪元素进度条

Aimless browsing on the web is changing to a goal-directed activity: uploading a file, completing a form, working through a lesson plan, watching a video. In response, we need a more complex web UI: not just signifiers for visited links, but ways of measuring progress.

在网络上进行无目标的浏览正变成一种针对目标的活动：上传文件，填写表格 ，制定课程计划，观看视频 。 作为响应，我们需要一个更复杂的Web UI：不仅是访问链接的指示符，而且是衡量进度的方法。

HTML5 addresses that need with the <progress> element. Like all additions to HTML5, the <progress> element comes with supplementary CSS and JavaScript, which I’ll also cover in this article.

HTML5通过<progress>元素满足需要。 像HTML5的所有附加内容一样， <progress>元素也带有补充的CSS和JavaScript ，我还将在本文中进行介绍。

进度与米 (progress vs. meter)

<progress> is often confused with the <meter> element, so it’s important to distinguish the two:

<progress>通常与<meter>元素混淆，因此区分两者很重要：

• <progress> is used to display development over time of a specific task. The upper bound or limit of the task may be known (“determinate”) – proceeding through a set series of steps in an online exercise, or playing a music track of known length – or unknown (“indeterminate”) such as uploading a file to a server. The maximum value of <progress> may not be known before the element is displayed. For example, the number of steps needed to complete a form may change depending on the user’s answers, while the percentage of a file upload may change due to bandwidth, server activity, and other factors.

  <progress>用于显示特定任务 随时间的发展 。 任务的上限或上限可能是已知的(“确定”)–进行一系列在线练习中的一系列步骤，或者播放已知长度的音乐曲目–或未知(“不确定”)，例如上载文件到服务器。 在显示元素之前，可能不知道 <progress>的最大值。 例如，填写表格所需的步骤数可能会根据用户的答案而改变，而文件上载的百分比可能会由于带宽，服务器活动和其他因素而改变。

• The conditions for <meter> are different in that its minimum and maximum values must be known beforehand. It would be fair to characterize <meter> as displaying a value that might fluctuate wildly (a volume meter for a music track, for example) between known minimum and maximum values.

  <meter>的条件不同，因为必须预先知道其最小值和最大值 。 将<meter>表征为显示的值可能会在已知的最小值和最大值之间剧烈波动(例如，用于音乐曲目的音量表)，这是很公平的。

Another example: if you were running a fundraising drive on a website, <progress> could be used to show collective donations towards a goal, whereas <meter> might display the number of online visitors to the donations page at any moment, to the maximum capacity of the server.

另一个例子：如果您正在网站上进行筹款活动，则<progress>可用于显示针对某个目标的集体捐赠，而<meter>则可随时显示捐赠页面上在线访问者的数量，最大服务器的容量。

Another distinction: <progress> can have a minimum value of 0. The minimum value of a <meter> may be any floating-point number, including negative numbers: think of a temperature gauge, for example.

另一个区别： <progress>的最小值可以为0。 <meter>的最小值可以是任何浮点数，包括负数：例如，以温度计为例。

使用进度标签 (Using The Progress Tag)

The <progress> element itself is pretty simple. It’s a standard closed tag:

<progress>元素本身非常简单。 这是一个标准的封闭标签：

<progress></progress>

This creates an indeterminate element. Right now, since its value is unknown, <progress> will be animated in a “waiting” or “working” state in browsers that support it:

这将创建一个不确定的元素。 现在，由于未知值， <progress>将在支持它的浏览器中以“等待”或“工作”状态显示动画：

Adding a max value to the element sets an upper limit, but doesn’t change the animation: <progress max="100"></progress>

向元素添加max可设置上限，但不会更改动画：<progress max =“ 100”> </ progress>

Adding a value sets the current state of progress:

添加一个value将设置当前的进度状态：

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

And changes the appearance of the element:

并更改元素的外观：

The progress bar is still animated in most browsers, although much more subtly; naturally, it can also be completely customized with CSS.

在大多数浏览器中，进度条仍然具有动画效果，尽管它要巧妙得多。 自然，也可以使用CSS完全自定义。

It should be noted that progress is inline (“phrasing”) content, and can be mixed in with other content:

应当指出，进度是内联(“措辞”)内容，可以与其他内容混合使用：

<p> We’ve made it to 50% of our funding goal! 
<span>$0</span>
<progress value="5012" max="10000" id="funding"></progress>
<span>$10,000</span>

It might be somewhat surprising to learn that you can’t use <label> with <progress> in valid HTML5, even though we might consider <progress> to be a form element. The fact is that the user will never need to interact with <progress>: it is a “reporting” element, not something that the user would ever need to enter information into, and therefore does not need a <label>.

了解到即使在我们将<progress>视为表单元素的<progress> ，也无法在有效HTML5中将<label>与<progress> <label>一起使用，这可能有些令人惊讶。 事实是用户将永远不需要与<progress>进行交互 ：这是一个“报告”元素，而不是用户将信息输入到其中的东西 ，因此不需要<label> 。

However, the <output> element can be used with <progress> to show its value. A simple example:

但是， <output>元素可以与<progress>一起使用以显示其值。 一个简单的例子：

Progress towards our $10,000 pledge drive:
<progress min="0" max="10000" value="5012" id="funding" onchange="pledgeUpdate"></progress>
<output for="funding" id="totalDonations">0</output>

A script to update the total pledge amount and convert the value into a dollar amount with commas:

用于更新总抵押金额并将其值转换为美元金额(用逗号分隔)的脚本：

var funding = document.getElementById('funding').value;
pledgeUpdate();

function numberWithCommas(x) {
	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function pledgeUpdate() {
	document.getElementById('totalDonations').value = "$" + numberWithCommas(funding);
}

The result:

结果：

Progress towards our $10,000 pledge drive:

我们的10,000美元认捐活动取得了进展：

0

0

Of course, it’s easy to set the value of the <progress> element by writing to it directly:

当然，通过直接写入<progress>元素来设置它的值很容易：

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

The appearance of the <progress> element is up to individual browser implementation, and leans heavily on the underlying operating system’s established UI theming; customizing the appearance of the progress bar to make it appear consistent is up to CSS.

<progress>元素的外观取决于各个浏览器的实现，并且很大程度上取决于基础操作系统已建立的UI主题。 定制进度条的外观以使其看起来一致取决于CSS。

风格上的进步 (Progressing In Style)

The <progress> element appears at a default size on a web page, no matter what its maximum value. We can change this by setting an explicit width and height:

<progress>元素以默认大小显示在网页上，无论其最大值如何。 我们可以通过设置显式的width和height来改变它：

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

Firefox and IE obey both declarations, but you’ll find that Webkit/Blink, while it follows the width, ignores or responds oddly to height. To get the element to work predictably in Chrome, Safari and Opera we need to reset its appearance:

Firefox和IE都遵守这两个声明，但是您会发现Webkit / Blink遵循宽度，却忽略或对高度做出奇怪的响应。 为了使元素可以在Chrome，Safari和Opera中正常工作，我们需要重置其外观：

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

You’ll find that this removes all native OS styling on the element in Webkit: the progress bar turns green, and the background a dark grey. To get the equivalent in Firefox, we must take a similar approach:

您会发现这将删除Webkit中元素上的所有本机OS样式：进度条变为绿色，背景变为深灰色。 要在Firefox中获得等效功能，我们必须采取类似的方法：

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

However, the result differs: the progress bar will appear blue in Firefox, for example. To make things perfectly consistent, we have to dig a little deeper into the CSS:

但是，结果有所不同：例如，进度条在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;
}

The result:

结果：

You’ll note some deliberate repetition in the CSS above, due to the fact that browsers exhibit eccentricities in HTML5 CSS pseudo-element selectors. For example, Firefox will completely ignore ::-moz-progress-bar if it is grouped with any other selector. For this reason, I strongly suggest you use the selector order shown above when attempting to customize HTML5 progress bars.

由于浏览器在HTML5 CSS伪元素选择器中表现出怪异性 ，因此您会在上面CSS中注意到一些故意的重复。 例如，如果Firefox与其他选择器组合在一起，它将完全忽略::-moz-progress-bar 。 因此， 强烈建议您在尝试自定义HTML5进度栏时使用上面显示的选择器顺序 。

走向垂直 (Going Vertical)

Like range elements, progress elements may be oriented vertically: think of the “thermometers” displayed beside heritage buildings to track donations towards a restoration project. The most consistent way I know to achieve this is to use a CSS transform. Note that it is particularly important to use a box-sizing: border-box CSS reset in this case, otherwise Mozilla and Webkit will size and shape the <progress> element differently:

像范围元素一样，进度元素也可能是垂直定向的：想像一下在传统建筑旁边显示的“温度计”，以追踪对修复项目的捐款。 我知道实现此目标的最一致的方法是使用CSS转换 。 请注意，使用box-sizing: border-box尤为重要box-sizing: border-box在这种情况下，请重置box-sizing: border-box CSS，否则Mozilla和Webkit将以不同的方式调整<progress>元素的大小和形状：

* {
	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%;
}

This could be customized further:

可以进一步定制：

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);
}

The result can be seen below:

结果如下所示：

We gain several insights from this experiment:

我们从该实验中获得了一些见解：

• Firefox uses background to style the background color of <progress> element; Webkit uses ::webkit-progress-bar, and IE uses ::-ms-fill

  Firefox使用background来设置<progress>元素的背景颜色； Webkit使用::webkit-progress-bar ，而IE使用::-ms-fill

• The active measuring portion of the progress bar is referred to as ::-moz-progress-bar in Firefox, and webkit-progress-value in Webkit. In IE10, the bar’s color can only be affected by the color property.

  进度条的活动度量部分在Firefox中称为::-moz-progress-bar ，在Webkit中称为webkit-progress-value 。 在IE10中，栏的颜色只能受color属性的影响。

结论 (Conclusion)

<progress> is a very useful element, although it lacks utility without a means to constantly update its value. I’ll look at that, and various uses of the <progress> element, in future articles.

<progress>是一个非常有用的元素，尽管它缺乏实用性，无法持续更新其value 。 在以后的文章中，我将介绍该元素以及<progress>元素的各种用法。

翻译自: https://thenewcode.com/866/Using-The-HTML5-progress-Element

伪元素进度条