Community Learn Tools Library Leisure

English

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

950 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：

jquery progress bar

source：php.cn

Previous article：Solution to JQuery's html (data) method and <script>script block_jquery Next article：JQuery+div+css 无限级联树实现代码_jquery

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