0

Possible Duplicate:
Jquery:: Ajax powered progress bar?

I need to create some kind of countdown

pleas in Html

count = Math.floor((futureDate-today)/1000);

if(count > 0) //move Loading bar by percent

How can I have the same Loading bar of the code that has the animation of the battery?

Like this demo and this is my demo code which I used to decrement the counter:

Community
  • 1
  • 1
Subhe Ryozaghi
  • 43
  • 1
  • 10

1 Answers1

1

You need a starting date as well in order to have a percentage for the battery. Check this fiddle: http://jsfiddle.net/uhGjz/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>MyBattery</title>
  <style type='text/css'>
#bat {
    width:100px;
    height: 30px;
    border: 1px solid;
    position: relative;
}
#fill {
    height: 100%;
    background-color: red;
    width: 0%;
}
  </style>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <script type='text/javascript'>
$(function(){
var now = new Date();
var today = now.getTime();
var pastDate = Date.parse("Tue, 1 Jan 2012 00:00:00 GMT");
var futureDate = Date.parse("Tue, 1 Aug 2012 00:00:00 GMT");
var count = Math.floor((today-pastDate)/(futureDate-pastDate)*100);

if(count > 0) { //move Loading bar by percent 
    $('#fill').animate({
       width: count+"%"
    }, 1000);
}

}); 
</script>
</head>
<body>
  <div id="bat"><div id="fill"></div></div>
  <!-- Your own content! -->
</body>
</html>
AvL
  • 3,083
  • 1
  • 28
  • 39
  • My fraind this work with html5 i want the same code in html – Subhe Ryozaghi May 23 '12 at 11:15
  • The code posted above is JavaScript. As you can see in the [jsfiddle](http://jsfiddle.net/uhGjz/) you need to add the following HTML: `
    ` Good luck! And by the way, if you expect good answers on this board you need to vote or accept...     – AvL May 23 '12 at 11:24
  • ya sorry I Accept your anser and thank youuuu for anser me – Subhe Ryozaghi May 23 '12 at 11:30
  • who can incloud this code in my page ??? just i copy this code and cod in (css and javascipt and this div='bat' ) to page html or deffrent way ?? – Subhe Ryozaghi May 23 '12 at 11:35
  • See edit... But maybe you should check this place for some basic understanding on how to create websites ;-) Good luck again! http://www.w3schools.com/ – AvL May 23 '12 at 11:45
  • thhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhank you ^_^ – Subhe Ryozaghi May 23 '12 at 11:49