Home > Developer > JavaScript
Through our great CSS, we can achieve a very beautiful progress bar style. With the Javascript effect, we can completely "cheat" our users so that they can patiently wait for the browser to finish processing. The above principle is known, so you can directly read the code. I am still using the jQuery framework, because such a short code may be easier to understand.
Of course, there are still many things to do about this control. I just provided a way to follow the Web standards. Not much nonsense.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> Javascript Progress Bar Demo-jb51.net </title> <style type =" text/css "> # progress {background: white; height: 20px; padding: 2px; border: 1px solid green; margin: 2px ;}# progress span {background: green; height: 16px; text-align: center; padding: 1px; margin: 1px; display: block; color: yellow; font-weight: bold; font-size: 14px; width: 0% ;} </style> </pead> <body> Javascript progress bar Demo <p> the principle is to use Javascript to control the span css width (and other styles). For details, see the link: http://www.jb51.net/article/13993.htm </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
