Skip to content

Instantly share code, notes, and snippets.

@timmatheson

timmatheson/jquery_progress_bars.html

Created January 4, 2011 06:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timmatheson/764473 to your computer and use it in GitHub Desktop.
Save timmatheson/764473 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Animated Progress Bar Examples
Raw
jquery_progress_bars.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery Progress Bars</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".progress-bar").each(function(){
var percentage = parseInt($(this).html());
if(percentage > 0){
$(this).animate({'width':''+percentage+'px'}, 800);
}else{
$(this).css({'color':'black', 'background':'none'}, 800);
}
})
})
</script>
<style type="text/css" media="screen">
*{ font-family: "Lucida Grande";}
.progress-bar-holder{
width: 125px;
border: 1px solid #ccc;
padding: 0.2em;
margin: 1em 0.2em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.progress-bar{
height: 30px;
color: #fff;
font-weight: bold;
text-align: right;
background: #63A25C;
width: 0px;
padding: 0.8em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
a{ color: red; }
a:hover{ color: green;}
</style>
</head>
<body>
<h1>jQuery Progress Bars</h1>
<div class='progress-bar-holder'>
<div class='progress-bar'>
0%
</div>
</div>
<div class='progress-bar-holder'>
<div class='progress-bar'>
25%
</div>
</div>
<div class='progress-bar-holder'>
<div class='progress-bar'>
50%
</div>
</div>
<div class='progress-bar-holder'>
<div class='progress-bar'>
75%
</div>
</div>
<div class='progress-bar-holder'>
<div class='progress-bar'>
100%
</div>
</div>
<a href="">Replay</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment