HTML5 progress label how to use? Progress properties of tags

This article mainly introduces the usage of the HTML5 progress tag, as well as an introduction to the attribute usage of the HTML5 progress tag. Let's take a look at this article next.

First we introduce the use of HTML5 progress tags:

<progress> tags define the progress (process) in the run.

You can use the <progress> tab to display the progress of time-consuming functions in JavaScript.

<progress> indicates the progress of the task, the background is gray, and the finished part is filled with a pulsating green bar (but the styles are different under different browsers).

Tip: Use the <progress> tab to display the progress of your download.

Let's take a look at an example of the use of a HTML5 progress tag:

Mark "Download Progress":

Download progress for object: <progress value= ' max= ' ></progress>

Effect

The figure is obvious, not much to say.

Now, let's talk about the properties of the HTML5 progress tag:

1. You can set the percentage (0~1 decimal) by the Value property

Usually we can also place the progress value inside the element, so that when the browser does not (www.php.cn) support, it can display the text as a fallback scheme.

<progress value= "0.25" >25%</progress>

2, the Max property can be used to set the maximum value, when the range of value is 0~ maximum

<progress value= "max=" >25%</progress>

The 3,value property represents the progress of the progress bar completion, and the range of value values is between 0~max. If you do not set the Max property, the value of the values property will range between 0~1.

If there is no value, the completion progress is indeterminate. This indicates that the task is in progress, but it does not know how long it will take to complete. At this time progress in the WebKit browser we can use as loading, indicating that the page is loading, or AJAX request background data.

If value is not set, it indicates an indeterminate progress bar (the slippage of the progress is constantly looping)

<progress></progress>

This dynamic map cannot be put out, you can see for yourself, this style is very interesting.

Daily summary of HTML5 progress tags:

Progress Tags: Judging from the name, it is estimated that everyone can guess what the label is, yes, he is a progress bar. In the HTML5 we can finally do without the simulation.

<progress id= "topic.alibabacloud.com" max= "></progress>"

Progress property: Value: Represents the current progress Max: Represents the total progress note: Values for the value and Max properties must be greater than the value of 0,value is less than or equal to the value of the Max property. Case:

<! DOCTYPE html>
This is also set up a dynamic effect, the effect


This diagram is dynamic, because it is not able to intercept the dynamic, so can only be seen, we can try to get started,

This article about the HTML5 Progress progress bar label application to this end, there are questions can be asked below.