Skip to content

Instantly share code, notes, and snippets.

@steveburkett

steveburkett/gist:1541266

Created December 30, 2011 20:05
Show Gist options
  • Save steveburkett/1541266 to your computer and use it in GitHub Desktop.
Save steveburkett/1541266 to your computer and use it in GitHub Desktop.
Download ZIP
simple progress bar
Raw
gistfile1.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var running = false;
if( !running ) {
$('.meter-wrap').hover(function(){
var count = 0;
var running = true;
var $this = $(this);
var inter = null;
function run(){
count++;
$this.find('.meter-value').css('width', count+"%");
$this.find('.meter-text').text(count+"%");
if(count == 100){
clearInterval(inter);
running = false;
}
}
inter = setInterval(run, 50);
});
}
});
</script>
<style type="text/css">
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #bdbdbd url("http://blog.benogle.com/wp-content/uploads/2009/06/meter-outline.png") top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="meter-wrap">
<div class="meter-value" style="background-color: #0a0; width: 0%;">
<div class="meter-text">
Hover over me
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment