: The Progress Indicator element
The HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Try it
| Content categories | Flow content, phrasing content, labelable content, palpable content. |
|---|---|
| Permitted content | Phrasing content, but there must be no element among its descendants. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | progressbar |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLProgressElement |
Attributes
This element includes the global attributes.
This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1 .
This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max , or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute(‘value’) .
Examples
progress value="70" max="100">70 %progress>
:indeterminate
Псевдокласс, который отражает неопределённое состояние чекбокса, радиокнопки или прогресс-бара.
Время чтения: меньше 5 мин
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдокласс, который используется для стилизации трёх элементов: чекбоксов, радиокнопок и прогресс-баров.
Пригодится в двух случаях. Во-первых, для стилизации элементов в их исходном состоянии — при открытии формы или начале загрузки. Во-вторых, для показа пользователю незавершённости процесса выбора или загрузки.
Для чекбоксов и радиокнопок состояние indeterminate не получится присвоить напрямую в HTML, его можно задать только через JavaScript.
Прогресс-бару браузер присваивает :indeterminate автоматически, если не определён атрибут value — процент загрузки.
Примеры
Скопировать ссылку «Примеры» Скопировано
- , если не все пункты вложенной группы были выделены. Показывает пользователю, что он пока взаимодействовал не со всеми опциями выбора, которые ему предложены.
- Группа с одинаковым атрибутом name , но у которой ни один элемент не установлен в checked . Показывает пользователю, что он пропустил пункт и не выбрал свой вариант.
- . Показывает процесс загрузки, но не показывает его прогресс.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
После селектора, который выбирает элемент прогресс-бара, чекбокса или группу радиокнопок, ставим двоеточие и пишем ключевое слово indeterminate , прописываем стили.
input:indeterminate opacity: 0.45;>input:indeterminate opacity: 0.45; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер присваивает чекбоксу или радиокнопке псевдокласс :indeterminate , когда они определены так через JavaScript. Мы можем использовать этот псевдокласс для стилизации нетронутого пользователем элемента формы, подчёркивая незавершённость выбора.
const inputs = document.getElementsByTagName('input'); for (let i = 0; i < inputs.length; i++) inputs[i].indeterminate = true;>const inputs = document.getElementsByTagName('input'); for (let i = 0; i inputs.length; i++) inputs[i].indeterminate = true; >
The HTML5 progress Element
The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he’d be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks. Here is the basic markup for the progress element:
- max – Indicates how much task needs to be done before it can be considered as complete. If not specified the default value is 1.0 .
- value – Indicates the current status of the progress bar. It must be greater than or equal to 0.0 and less than or equal to 1.0 or the value of the max attribute (if present).
A progress bar can be in two states – indeterminate and determinate.
Based on your combination of browser and operating system, the progress bar can look different. Zoltan “Du Lac” Hawryluk covers the cross browser behavior of progress element in great depth in his article on HTML5 progress bars (which is definitely worth reading). Wufoo has some screenshots of how it looks on other operating systems on their support page for progress.
It’s pretty easy to target and style an indeterminate progress bar because we know that it doesn’t contain the value attribute. We can make use of CSS negation clause :not() to style it:
Throughout this article, we’ll only focus on styling the determinate state of the progress bar. So let’s change the state by adding the max and value attribute.
Without applying any CSS, the progress bar looks like this in Chrome 29 on Mac OS 10.8.
Note that only adding the max attribute doesn’t change the state of the progress bar because the browser still doesn’t know what value to represent.
This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let’s not worry about the fallback techniques for supporting older browsers that don’t understand the progress element.
We can target determinate progress bars using the progress[value] selector. Using progress only is fine as long as you know that you do not have any indeterminate progress bars in your markup. I tend to use the former because it provides clear distinction between the two states. Just like any other element we can add dimensions to our progress bar using width and height :
This is where the fun part ends and things get complicated because each category of browsers provide separate pseudo classes to style the progress bar. To simplify things, we don’t really care about which versions of each browser support the progress element, because our fallback technique will take care of the rest. We classify them as follows:
Google Chrome, Apple Safari and the latest version of Opera (16+) falls into this category. It is evident from the user agent stylesheet of webkit browsers, that they rely on -webkit-appearance: progress-bar to style the appearance of progress element.
To reset the default styles, we simply set -webkit-appearance to none .
On further inspecting the progress element in Chrome Developer Tools, we can see how the spec is implemented.
WebKit/Blink provides two pseudo classes to style the progress element:
- -webkit-progress-bar is the pseudo class that can be used to style the progress element container. In this demo we’ll change the background color, border-radius and then apply inset box shadow to the progress element container.
- -webkit-progress-value is the pseudo class to style the value inside the progress bar. The background-color of this element by default is green which can be verified by inspecting the user-agent stylesheet. For this demo we will create a candystrip effect using linear-gradient on background-image property.
First we’ll style the -webkit-progress-bar (the container):
progress[value]::-webkit-progress-bar
Next we’ll style the -webkit-progress-value (the bar) with multiple gradient backgrounds. One for striping, one for top to bottom shadowing, and one for left to right color variation. We’ll use the -webkit- prefix for the gradients since we’re using it for the progress bar itself anyway.
progress[value]::-webkit-progress-value
At the time of writing only WebKit/Blink browsers support animations on progress element. We’ll animate the stripes on -webkit-progress-value by changing the background position.
@-webkit-keyframes animate-stripes < 100% < background-position: -100px 0px; >> @keyframes animate-stripes < 100% < background-position: -100px 0px; >>And use this animation on the -webkit-progress-value selector itself.
-webkit-animation: animate-stripes 5s linear infinite; animation: animate-stripes 5s linear infinite;Update: Animations don’t seem to work anymore on the pseudo elements within a progress element, in Blink. At the time this was published, they did. Brian LePore reported this to me and pointed me toward this thread discussing it and created a reduced test case. Simuari’s thought:
Maybe it’s the same with the that @keyframes defined outside of the Shadow DOM can’t get accessed by an element inside. From the timing it might have changed in Chromium 39/40?
what seems to work is moving the animation from progress::-webkit-progress-bar to progress
Bardi Harborow reports that’s not true, though, and also pointed out the logged bug.
At the time of writing only WebKit/Blink browsers support pseudo elements ::before and ::after on progress bar. By simply looking at the progress bar, it is not possible to tell the actual value. We can solve this problem by displaying the actual value right at the tail-end of the progress bar using either ::before or ::after .
progress[value]::-webkit-progress-value::before
Interestingly, content: attr(value) doesn’t work on progress bars. However, if you explicitly specify the text inside the content attribute, it works! I haven’t been able to find out the reason behind this behavior. Since this works only on WebKit/Blink browsers, there is no good reason to embed content inside pseudo elements, at least for now.
Update 11/2016: progress::after < content: attr(value); >does seem to work in Blink now, but nothing else.
Similarly, ::after is used to create nice little hinge effect at the end of the progress bar. These techniques are experimental and not really recommended to be used if you are aiming for cross-browser consistency.
progress[value]::-webkit-progress-value::after
Similar to WebKit/Blink, Firefox also uses -moz-appearence: progressbar to paint the progress element.
By using appearence: none we can get rid of the default bevel and emboss. This unfortunately leaves behind a faint border in Firefox which can be removed by using border: none . This also solves the border issue with Opera 12.
Firefox provides a single pseudo class ( -moz-progress-bar ) we can use to target the progress bar value. This means that we cannot style the background of the container in Firefox.
progress[value]::-moz-progress-bar
Firefox doesn’t support ::before or ::after pseudo classes on progress bar, nor does it allow CSS3 keyframe animation on progress bar, which gives us a slightly reduced experience.
Only IE 10+ natively supports progress bar, and only partially. It only allows changing the color of the progress bar value. IE implements value of the progress bar as the color attribute rather than the background-color .
What about browsers that don’t support them?
The progress element is natively supported in: Firefox 16+, Opera 11+, Chrome, Safari 6+. IE10+ is partially supports them. If you want to support older browsers, you’ve got two options.
1. Lea Verou’s HTML5 progress polyfill
Lea Verou’s excellent polyfill adds almost full support for Firefox 3.5-5, Opera 10.5-10.63, IE9-10. This also adds partial support in IE8. It involves including progress-polyfill.js file in your HTML and adding CSS selectors that the script file uses. To know more about its usage, check out the CSS source code of the project page.
This is my preferred (no-js) approach. It makes use of a common technique that is also used by audio and video elements.
Simulate the look and feel of progress bar using div and span inside the progress tag. Modern browsers will ignore the content inside the progress tag. Older browsers that cannot identify progress element will ignore the tag and render the markup inside it.
.progress-bar < background-color: whiteSmoke; border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset; width: 250px; height: 20px; position: relative; display: block; >.progress-bar > span
It is fairly common to use both the techniques in conjunction and it is perfectly safe for production sites. Once you get hold of styling a single progress bar, then adding styles for multiple progress bars is merely an exercise which can be accomplished using classes.
The demo should run fine in all browsers, including Internet Explorer (down to IE 8). The progress bar color is blue in all the versions of Internet Explorer. Opera 11 and 12 doesn’t permit changing the progress bar color. Hence, it shows the default green color. The demo uses additional markup to display some meta information about the progress bar and the percentage value.
For additional reading, check out the HTML5 Doctor article. It covers some similar ground but has some bits about a few additional attributes as well as how to update the bar with JavaScript if you need that.