Detailed explanation of HTML5 progress bar

HTML5 progress progress bar detailed explanation

HTML5 progress element introduction ##progress is a new element of HTML5, which means defining a progress bar and has a wide range of uses , can be used to display the progress of file uploading, file downloading progress, and can also be used as a loading status bar for loading.

html5 progress progress bar syntax ## '70' max= '100' > Click here to see what the html5 progress bar looks like.

html5 progress attribute progress max max attribute indicates the maximum progress value of the progress bar , if present, must be a valid floating point number greater than 0. The default value of max is 1.

progress value The value attribute indicates the progress of the progress bar. The value range is 0~ between max. If the max attribute is not set, the value attribute should range from 0 to 1.

If there is no value, then the completion progress is uncertain. At this time, it means that the task is in progress, but it is not known how long it will take to complete. At this time, progress can be used as loading in webkit browsers, indicating that the page is being loaded, or that Ajax is requesting background data.

The above picture is taken from the chrome browser.

#Progress without setting a value is like loading, with the progress block in the middle wandering back and forth.

The progress without value looks like below in Windows 7:

## It is indeed a bit ugly, but it inherits the typical style of windows.

html5 progress compatibility progress is supported in IE10 browsers

#html5 progress progress effect display progress animation effect simulation code is as follows:

## 您的浏览器不支持progress元素

function goprogress(){ var pro=document.getElementsByTagName("progress")[0]; gotoend(pro,0); } function gotoend(pro,value){ var value=value+1; pro.value=value; if(value

Click here to view progress animation simulation.

html5 progress related style settings We implement a custom style for progress As an example, let’s talk about the styles of progress that we can set.

#We need to change the progress It looks like the above.

code show as below:

您的浏览器不支持progress元素 .mypro{ background:orange; border:1px solid red; border:2px solid #000; width:300px; height:50px; -webkit-appearance: none; } ::-ms-fill{ background:deeppink; } ::-moz-progress-bar{ background:deeppink; } ::-webkit-progress-bar{ background:orange; } ::-webkit-progress-value{ background:deeppink; }

#progress can set common attributes such as width, height, border, etc.

For IE10 and Firefox browsers, you can use background to set the background color of the progress bar.

For webkit browsers, use ::-webkit-progress-bar to set the background color of the progress bar.

For IE10, use ::-ms-fill to set the background color of the progress bar to complete the progress.

For firefox, use ::-moz-progress-bar to set the background color of the progress bar to complete the progress.

For webkit browsers, use ::-webkit-progress-value to set the background color of the progress bar to complete the progress.

#Note: ::-webkit-progress-bar settings is the background color of the progress bar, and ::-moz-progres-bar sets the background color of the progress bar to complete the progress, which is exactly the opposite.

And for webkit browsers, on IOS, you need to use -wekbit-appearance:none to clear the default style of progress, so that the background color and progress color can be changed. effect.

Click here to view the custom progress bar style.

html5 progress conclusion

##We can upload the file in ajax2, upload.onprogress Using progress in the event callback can easily display the progress of file upload. You can also use the progress element in the onprogress event used in the FileReader preview image to display the progress of image reading.

This article explains the HTML5 progress bar. For more related content, please pay attention to the php Chinese website.

Related recommendations:

Simple PHP MySQL paging class

Two tree array constructors without recursion

HTML to Excel and printing , download function

Detailed explanation of HTML5 progress bar

Related articles