progress в HTML


Содержание

HTML тег

(от англ. «progress» ‒ «ход, процесс») определяет индикатор прогресса выполнения задачи (прогресс-бар), отображающего, какой процент задачи (например, загрузки файла) уже выполнен. Динамические изменения в индикаторе прогресса производятся с помощью скриптов. Внешний вид элемента зависит от браузера и операционной системы и может различаться между собой.

Примечание: Текст, размещенный внутри элемента

будет отображен только теми браузерами, которые не имеют поддержки данного элемента.

Примечание: Элемент

не должен использоваться для определения индикатора состояния (использование дискового пространства, релевантность результатов поиска, количества результатов поиска, объема жидкости, давления и др.). Для этого используйте элемент .

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент

со следующими значениями CSS по умолчанию:

Различия между HTML 4.01 и HTML5

был добавлен в HTML5.

Пример использования:

Прогресс загрузки файла:

Если для элемента

не указывать атрибут value , то большинство браузеров будут отображать анимацию:

в HTML

представляет ход выполнения задачи.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
8.0 10.0 16.0 6.0 11.0

Различия между HTML 4,01 и HTML5

является новым в HTML5.

Советы и примечания

Совет: Используйте тег

в сочетании с JavaScript для отображения хода выполнения задачи.

не подходит для представления датчика (например, использование дискового пространства или релевантность результата запроса). Для представления датчика используйте вместо тега.

Создание и стилизация индикатора выполнения в HTML5

Перевод: Влад Мержевич

В HTML5 добавлен элемент для индикатора выполнения, который позволяет показывать прогресс выполнения определённых задач вроде скачивания или загрузки, в основном всё, что занимает некоторое время.

В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.

Основы использования

Индикатор добавляется тегом

; значение прогресса определяется атрибутами value, min и max следующим образом.

Поскольку речь идёт о встроенном индикаторе, его вид варьируется в зависимости от платформы. Ниже показано, как встроенный индикатор выглядит в Windows и OS X.


Давайте теперь попробуем стилизовать этот элемент, чтобы он выглядел одинаково на всех платформах.

Стилизация индикатора выполнения

В таблице стилей мы можем использовать селектор progress для добавления стилевых правил к элементу

. В данном примере мы меняем цвет фона, убираем границу и сделаем скругление, задав радиус в половину высоты.

Тем не менее, в браузерах имеются небольшие отличия. В Firefox стили применяются к самому индикатору, в то время как стиль бегунка не меняется.

В Chrome и Safari исходные стили убираются и заменяются на стили Webkit, так что стиль выше не применяется (по крайней мере, на данный момент).

Итак, нам нужно что-то ещё в таком случае.

В Chrome и Safari элемент

расшифровывается следующим образом.

Таким образом, чтобы изменить стиль индикатора выполнения и бегунка в этих браузерах, мы должны добавить такие псевдоклассы.

У Firefox также есть специальный псевдокласс ::-moz-progress-bar. В отличие от Chrome и Safari, этот псевдокласс в Firefox относится к бегунку.

Окончательно собираем эти селекторы вместе для стилизации индикатора выполнения.

Анимация прогресса

Далее мы увидим как анимировать индикатор. Как правило, бегунок растёт слева направо по мере прогресса задачи. Идея состоит в том, бегунок будет расти от 0 и остановится, как только достигнет максимального значения. Будем также отображать значение числа по мере продвижения бегунка. Ниже приводится структура HTML.

В данном примере для анимации индикатора мы будем использовать jQuery, так что не забудьте вставить jQuery таким образом.

Затем мы добавим скрипт для увеличения прогресса. Вначале сохраним в переменных сам элемент, максимальное и текущее значение и период времени.

Затем создаём переменную, которая хранит функцию анимации. В этом примере она называется loading.

Внутри данной функции устанавливаем значение приращения. Будем увеличивать значение на 1 за каждый период времени — вы можете повысить это число, чтобы бегунок двигался быстрее.

Затем добавим полученный результат в индикатор.

И показываем значение рядом с индикатором выполнения.

Далее создаём новую функцию для запуска анимации.

В этот момент анимация уже действует, однако значение будет расти бесконечно. Итак, нужно создать условный оператор для анимации чтобы остановиться, когда анимация достигнет максимального значения.

Сохраним вышеприведённую функцию в переменной.

Затем внутри переменной loading добавляем условный оператор.

Как только значение равно максимальному значению, выполняется функция clearInterval, которая останавливает анимацию.

Вот и все коды для анимации индикатора выполнения.

Поддержка браузеров

полностью поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.

в HTML

отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Категории контента Потоковый контент, фразовый контент, контент, ассоциированный с label, явный контент.
Разрешенный контент Фразовый контент, но среди его потомков не должно быть элемента

.

Tag omission Нет, открывающий и закрывающий теги обязательны.
Разрешенные родители Любой элемент, который принимает фразовый контент.
Разрешенные ARIA роли Нет
DOM интерфейс HTMLProgressElement

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

max Этот атрибут описывает сколько затрат требует задача, указанная элементом progress . Атрибут max , в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1. value Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max , или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определен; это указывает на то, что действие продолжается без указания на то, сколько времени оно займет.

Примечание: Минимальное значение всегда 0, а атрибут min недопустим для прогресс-элемента. Вы можете использовать свойство CSS -moz-orient , чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.

Примечение: Псевдокласс :indeterminate может быть использован для работы с неопределенным индикатором выполнения. Чтобы индикатор выполнения стал неопределенным после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute(«value»)


Примеры

Result

Для Windows 7, результат выполнения будет выглядеть так :

Создание и оформление прогресс бара с помощью CSS3 и HTML5

Полоса загрузки, состояние загрузки или как его называют — прогресс бар или статус бар. Он может применяться при опросах, при построении графиков, при тех же опросах. В качестве индикатора загрузки страницы, а также в качестве завершенности какой-нибудь операции в процентах. В HTML5 есть специальный тег, который облегчает работу с прогресс баром. А также с помощью CSS3 не составит сложности его оформить по собственному желанию. И в нашем случае нет необходимости использовать изображения, что, несомненно, является большим плюсом.

Реальный пример прогресс бара можно увидеть здесь:

Посмотреть примерСкачать

HTML5 часть — Создание и оформление прогресс бара

В HTML5 присутствует тег

, который значительно облегчает нам работу с прогресс баром. Он имеет атрибут min, max и value. Чтобы он появился на странице, необходимо написать следующее:

Когда вы вставите вышеприведенный код в HTML, то увидите прогресс бар, который отображается по умолчанию и с базовыми стилями. Если вы пользовались различными операционными система, то могли заметить, что прогресс бары в них отличаются.

CSS3 часть

А сейчас присвоим собственные стили нашему прогресс бару. В качестве селектора в CSS файле мы будем использовать сам тег progress:

Вот, к примеру, вышеприведенный код убирает границу у прогресс бара и фон делает серым.

Для разных браузеров разные селекторы

Дело в том, что чтобы правильно отображался прогресс бар в разных браузерах, необходимо использовать псевдо-селекторы, предназначенные специально для конкретного браузера.

Для Safari и Chrome:

Для Firefox:

А все вместе они выглядят следующим образом:

Анимация прогресс бара

HTML часть

Следующим шагом будет создание анимации прогресс бара. Итак, прогресс бар заполняется слева направо. То есть начинается когда value=»0″ и заканчивается когда value=»максимум». В качестве примера возьмем следующий код:

jQuery часть

Для анимации прогресс бара будем использовать библиотеку jQuery, поэтому ее необходимо сначала подключить:

Далее пишем скрипт о том, что наш прогресс бар будет заполняться. В первой строке мы определяем тот элемент, который будет заполняться(это и есть прогресс бар), во второй получаем максимум прогресс бара из атрибута max:

Далее создаем переменную, которая будет хранить значение функции анимации:

Внутри данной функции мы будем увеличивать заполнение прогресс бара на одну единицу:

А затем присваивать атрибуту value увеличенное значение:

Также мы будем показывать процент загрузки рядом с прогресс баром:

Затем нам нужна функция, которая запустит функцию анимации загрузки:

На данный момент анимация загрузки работает, но значения будут увеличиваться до бесконечности. Поэтому необходимо создать условия, при котором анимация остановиться, когда прогресс бар полностью заполнится, то есть достигнет максимума.

Будем хранить результат функции в переменной

А внутри функции loading напишем условие:

Ниже представлен весь код:

Вывод

Данный элемент, если он красиво оформлен, также позволяет выделить ваш сайт. Я уже писал выше где он применяется, но, возможно, вы найдете ему новое предназначение �� .

The HTML5 progress Element

Easily manage projects with monday.com


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:

As per the standard defined by W3C, the progress element represents the completion progress of a task. A progress element must have both a start tag (i.e.

) and an end tag (i.e.

), even though it looks like a replaced element (like an input). This is good though, as it helps with fallback content as we’ll cover later.

Apart from the global attributes, it can have two more attributes:

  • 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).

States of progress bar

A progress bar can be in two states — indeterminate and determinate.

1. Indeterminate

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:

2. Determinate

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.

Determinate state of the progress bar in Chrome 29 on Mac OS 10.8

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.

Styling progress bars

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:

  • WebKit/Blink Browsers
  • Firefox
  • Internet Explorer

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.

User-agent stylesheet of webkit browsers

To reset the default styles, we simply set -webkit-appearance to none .

Progress bar appearance after reset

On further inspecting the progress element in Chrome Developer Tools, we can see how the spec is implemented.

Chrome Developer Tools Snapshot

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):

Styling progress bar container

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.

Styling progress bar value

Adding Animation

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.


And use this animation on the -webkit-progress-value selector itself.

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:

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.

Pseudo Elements

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 .

Pseudo elements in action

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/2020: 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.

2. Firefox

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.

Faint border in Firefox and Opera

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.

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.

3. Internet Explorer

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.

2. HTML fallback

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.

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.

Индикаторы (теги progress и meter), ползунок | CSS и HTML

Тег progress HTML

progress (w3.org) показывает процент завершения работ. Например, степень заполнения формы или загрузки страницы.

Как изменить его стиль CSS, например, для резиновой вёрстки:

Тег meter HTML

meter (w3.org) определяет цифровое значение в неком диапазоне. В зависимости от положения на шкале линия будет принимать разный цвет.

110 120 » value=»110″> 110
50 120 » value=»50″> 50
-100 120 » value=»-100″> -100
-200 120 » value=»-200″> -200

атрибут описание по умолчанию
min самое низкое значение
low с min до low — диапазон низких значений; с low до high — диапазон средних значений min
high с low до high — диапазон средних значений; с high до max — диапазон высоких значений max
max самое высокое значение 1.0
optimum определяет предпочтительную окраску диапазонов. Для того, чтобы понять о чём речь, поменяем его значение (max+min)/2
value текущее значение

Стилизацию можно посмотреть у css-tricks.com.

Ползунок HTML


(w3.org) в отличии от предыдущих двух элементов может изменяться самим пользователем благодаря перетаскиванию ползунка курсором мышки.

атрибут описание по умолчанию
value текущее значение (max+min)/2
min самое низкое значение
max самое высокое значение 100
step шаг изменения значения 1
list нет поддержки браузерами

Его можно стилизовать благодаря псевдоэлементам CSS и сделать интерактивные динамические штучки на сайте благодаря JavaScript. Например, здесь получилось наглядно и просто продемонстрировать действие свойства border-image-slice.

Создание и стилизация индикатора выполнения в HTML5

Перевод: Влад Мержевич

В HTML5 добавлен элемент для индикатора выполнения, который позволяет показывать прогресс выполнения определённых задач вроде скачивания или загрузки, в основном всё, что занимает некоторое время.

В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.

Основы использования

Индикатор добавляется тегом

; значение прогресса определяется атрибутами value, min и max следующим образом.

Поскольку речь идёт о встроенном индикаторе, его вид варьируется в зависимости от платформы. Ниже показано, как встроенный индикатор выглядит в Windows и OS X.

Давайте теперь попробуем стилизовать этот элемент, чтобы он выглядел одинаково на всех платформах.

Стилизация индикатора выполнения

В таблице стилей мы можем использовать селектор progress для добавления стилевых правил к элементу

. В данном примере мы меняем цвет фона, убираем границу и сделаем скругление, задав радиус в половину высоты.

Тем не менее, в браузерах имеются небольшие отличия. В Firefox стили применяются к самому индикатору, в то время как стиль бегунка не меняется.

В Chrome и Safari исходные стили убираются и заменяются на стили Webkit, так что стиль выше не применяется (по крайней мере, на данный момент).

Итак, нам нужно что-то ещё в таком случае.

В Chrome и Safari элемент

расшифровывается следующим образом.

Таким образом, чтобы изменить стиль индикатора выполнения и бегунка в этих браузерах, мы должны добавить такие псевдоклассы.

У Firefox также есть специальный псевдокласс ::-moz-progress-bar. В отличие от Chrome и Safari, этот псевдокласс в Firefox относится к бегунку.

Окончательно собираем эти селекторы вместе для стилизации индикатора выполнения.

Анимация прогресса

Далее мы увидим как анимировать индикатор. Как правило, бегунок растёт слева направо по мере прогресса задачи. Идея состоит в том, бегунок будет расти от 0 и остановится, как только достигнет максимального значения. Будем также отображать значение числа по мере продвижения бегунка. Ниже приводится структура HTML.

В данном примере для анимации индикатора мы будем использовать jQuery, так что не забудьте вставить jQuery таким образом.

Затем мы добавим скрипт для увеличения прогресса. Вначале сохраним в переменных сам элемент, максимальное и текущее значение и период времени.

Затем создаём переменную, которая хранит функцию анимации. В этом примере она называется loading.

Внутри данной функции устанавливаем значение приращения. Будем увеличивать значение на 1 за каждый период времени — вы можете повысить это число, чтобы бегунок двигался быстрее.

Затем добавим полученный результат в индикатор.

И показываем значение рядом с индикатором выполнения.

Далее создаём новую функцию для запуска анимации.

В этот момент анимация уже действует, однако значение будет расти бесконечно. Итак, нужно создать условный оператор для анимации чтобы остановиться, когда анимация достигнет максимального значения.

Сохраним вышеприведённую функцию в переменной.

Затем внутри переменной loading добавляем условный оператор.

Как только значение равно максимальному значению, выполняется функция clearInterval, которая останавливает анимацию.

Вот и все коды для анимации индикатора выполнения.

Поддержка браузеров


полностью поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.

в HTML

tag represents the progress of a task.

element can be used in conjunction with JavaScript to display the progress of a task or process as it is underway.

tag should not be confused with the tag (which represents a gauge).

Syntax

tag is typically written as

with any contents inside the start and end tags. This content could be the current value and/or maximum value that can be displayed to legacy browsers (i.e. browsers that don’t support the

The value attribute represents the current value (i.e. where the progress is currently at). If you omit this attribute, the progress bar becomes «indeterminate», and it will not display any progress (but most browsers will display an animated bar to indicate to the user that it’s trying. ).

The max attribute represents the total amount (i.e. where the progress bar’s value will be when it’s finished).

Examples

Basic tag usage

Indeterminate Progress Bar

You can make a progress bar «indeterminate» by removing the value attribute.

JavaScript Example

Here’s a quick example that uses JavaScript to modify the value of the

element on the fly.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the

Attribute Description
value Specifies how much of the task has been completed.
max Specifies how much work the task requires in total.

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the

tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the

element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.


Differences Between HTML 4 & HTML 5

tag is new in HTML5.

For more detail on this element, see HTML5

Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the

tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

For more information on attributes for this tag, see HTML5

Tag Details

For more details about the

Specifications

Here are the official specifications for the

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Progress Bar with HTML and CSS

I want to create a progress bar like in the below image:

I have no idea about creating this. Should I use HTML5 techniques?

Would you please give me some help about creating this progress bar?

15 Answers 15

(EDIT: Changed Syntax highlight; changed descendant to child selector)

2014 answer: Since 2014 HTML now 5 includes a

element that does not need JavaScript. The percent value moves with the progress using inline content. Tested only in webkit. Hope it helps:

I like this one:

very slick with only this as HTML and the rest CSS3 that is backwards compatible (although it will have less eyecandy)

Edit Added code below, but taken directly from the page above, all credit to that author

Same as @RoToRa’s answer, with a some slight adjustments (correct colors and dimensions):

Here’s the fiddle: jsFiddle

And here’s what it looks like:

In modern browsers you could use a CSS3 & HTML5 progress Element!

Progress Bar without nested divs. for every element where the css linear-gradient works.

Create an element which shows the left part of the bar (the round part), also create an element for the right part. For the actual progress bar, create a third element with a repeating background and a width which depends on the actual progress. Put it all on top of the background image (containing the empty progress bar).

But I suppose you already knew that.

Edit: When creating a progress bar which do not use textual backgrounds. You can use the border-radius to get the round effect, as shown by Rikudo Sennin and RoToRa!

If you wish to have a progress bar without adding some code PACE can be an awesome tool for you.

Just include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and AJAX navigation. Best thing with PACE is the auto detection of progress.

It contains various themes and color schemes as well.

Using CSS Transtitions .

There is a tutorial for creating an HTML5 progress bar here. If you don’t want to use HTML5 methods or you are looking for an all-browser solution, try this code:

You can change the color GOLD to any progress bar color and #dbdbdb to the background-color of your progress bar.

Илон Маск рекомендует:  Что такое код dbmfirstkey
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL