Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > A simple jquery progress bar example_jquery

A simple jquery progress bar example_jquery

WBOY
Release： 2016-05-16 16:50:55
Original
1304 people have browsed it

The simplest progress bar implemented with jQuery, with less than 10 lines of code. The style can be ignored directly. (There is a picture that you need to find yourself)

A simple jquery progress bar example_jquery

[CSS] Code

Copy code The code is as follows:

$(function(){
var i=0;
(function progressBar(){
i=i 1;
if(i>=101){
i =0;
}
$("#proc").animate({width:i "%"},500);
$("#progressWord").text(i "%") ;
setTimeout(progressBar,1500);
})();
});

[CSS] Code

Copy code The code is as follows:

.progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
.progress_inner{
background-color: #DADAE4;
width: 100 %;
height: 40px;
}
.progress_word{
position:absolute;
left:50%;
top:24%;
font-weight: bold ;
}

[HTML] Code

Copy code The code is as follows:





0%

< /div>
Related labels：
jquery进度条
source：php.cn
Previous article：JS implements multiplication of two large numbers (integers)_javascript skills Next article：About the method of obtaining variables and assigning values ​​​​in img's href and src_javascript skills
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
Latest Articles by Author
Latest Issues
The execution order of VueJS scheduling functions causes problems I'm trying to display a list of announcements (retrieved from API) on a page. I'm using a ...
From 2024-04-06 10:37:58
0
1
385
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
Vertically rotated table title, centered + bottom aligned, cross-browser I have a table with rotated headers that looks as expected in Chrome, but not in Firefox. ...
From 2024-04-04 16:45:25
0
1
330
When getting data from multiple tables, how to query based on entries in the table in SQL grouping I have two tables click 2.ride click table id | time ride table id | timestamp I want to g...
From 2024-04-04 08:58:17
0
1
319
Use methods from apply To find the maximum value of an array, a simple way is Math.max.apply(null,myArray) Howeve...
From 2024-04-03 21:41:46
0
2
278
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template