Html + css + jquery implements a simple progress bar instance, cssjquery
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery implementation progress bar </title>
<Style type = "text/css">
Body {
Padding: 30px;
Margin-left: pixel PX;
Margin-top: 200px;
Width: 350px;
Border: 1px solid #98AFB7;
}
. ProgressBar {
Width: 280px;
Height: 20px;
Border: 1px solid #98AFB7;
Border-radius: 8px;
Background: # e1dfdf;
}
Input {
Margin-bottom: 15px;
}
Span {
Position: relative;
Top:-20px;
Left: 290px;
}
# Bar {
Width: 0px;
Height: 20px;
Border-radius: 7px;
Background: # 5EC4EA;
}
</Style>
// Introduce the Jquery File
<Script src = "Jquerys/jquery. js"> </script>
<Script type = "text/javascript">
Function progressBar (){
$ ("# Bar" ).css ("width", "0px ");
Var speed = 20; // speed of the progress bar
Bar = setInterval (function (){
NowWidth = parseInt ($ ("# bar"). width ());
If (nowWidth <= 279 ){
Var barWidth = (nowWidth + 1 );
$ ("# Bar" ).css ("width", barWidth + "px ");
Var totla = parseInt ($ (". progressBar"). width ())
Var ss = barWidth/totla * 100;
$ ("# Span_s"). text (ss );
Var index = $ ("# span_s"). text (). indexOf (".");
If (index! =-1 ){
Var context = $ ("# span_s"). text (). substring (0, index );
$ ("# Span_s"). text (context );
}
Else {
$ ("# Span_s"). text (ss );
If (parseInt ($ ("# span_s"). text () = 100 ){
Alert ('complete ');
}
}
} Else {
ClearInterval (bar );
}
}, Speed );
}
</Script>
</Head>
<Body>
<Input type = "button" value = "start" onclick = "progressBar ()"/>
<Div class = "progressBar"> <div id = "bar"> </div> <span id = "span_s"> 0 </span> <span> % </span>
</Body>
</Html>
This progress bar is very simple. First, a div inside the html is embedded with a div, and then you can write the desired style. The implementation of the special effect is very simple, writing an anonymous function in a timer is also easy to implement. Here I am executing an anonymous function in 20 milliseconds, and the code in it is to add one pixel at a time, you can also add pixels by percentage here. Another method is introduced. You can also use animations to achieve the progress bar effect ...... If you are interested, try it.
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
