Home > Web Front-end > JS Tutorial > jquery simple progress bar implementation code_jquery

jquery simple progress bar implementation code_jquery

WBOY
Release: 2016-05-16 18:32:43
Original
961 people have browsed it

Actually, my original plan was to be a web designer, but no one thought that my design was good. I still don’t have a job. I want to vent my feelings and won’t say more.

Rendering

jquery simple progress bar implementation code_jquery

Pictures needed:

Background image:

jquery simple progress bar implementation code_jquery

Progress display picture:

jquery simple progress bar implementation code_jquery

Web page structure:

Copy code The code is as follows:






css code:
Code
Copy code Code As follows:

#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height :49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url( pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height: 48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color :#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px;

JavaScript code:
Code
Copy code Code As follows:



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template