HTML 5 progress compatible with ie, progress bar style, html5progress

HTML 5 progress compatible with ie, progress bar style, html5progress

The html5 SS tag added by html5 is very useful. It can be used to create progress bars instead of making progress bars using css as before!

 

I. Usage of progress

The SS tag is very useful. It has two attributes: value and max. value indicates the current progress, while max indicates the total progress (100 is generally used)

1	<progress value="50" max="100"></progress>

 

Ii. How can progress be compatible with IE browsers?

If you have used the progress tag, you must know that it is easy to use but not compatible with IE. So today, let's talk about it if it is compatible with IE! We first add the progress and ie labels with js, because they are not recognized in ie browser, and then we can make css a progress bar! Take a look at the code!

Html code

123	<progress id="progress" value="1" max="100">    <ie id="ie"></ie></progress>

Css code

12345678910111213

progress::-webkit-progress-bar { background: #ccc; }progress::-webkit-progress-value  { background: blue; }progress {    display:block;    width:162px;    background:#ccc;}ie {    height:100%;    width:0%;    display:block;    background:blue;}

 

Js Code

12	document.createElement('progress');document.createElement('ie');

 

In this way, the progress tag can be compatible with all browsers. There are also page loading progress bar instances compatible with all browsers. If you are interested, please take a look!

Do you want to get updates from Wang yelou's personal blog every day? Add the Public Account"Ly89cn", Or scan the QR code below!

 

This article from Wang yelou's personal blog, this article address: http://www.ly89.cn/detailB/63.html

You are welcome to share this article. For more information, see the source and address of this article.