Feex,
<html><head>
<title>Progressbar</title><meta charset="utf-8">
<style type="text/css">
body {
background: repeating-linear-gradient(-45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px) fixed;
font-family: "Helvetica Neue",Arial,sans-serif;
color: #fff;
}
h1 {
color:#fff;text-shadow:0px 1px 0px #C7C8CA, 0px 2px 0px #B1B3B6, 0px 3px 0px #9D9FA2, 0px 4px 0px #8A8C8E, 0px 5px 0px #77787B, 0px 6px 0px #636466, 0px 7px 0px #4D4D4F, 0px 8px 7px #001135;
font-size: 35px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.fn.progress = function (options){
var defaults = {
start: new Date(),
finish: new Date().setTime(new Date().getTime()+60000),
interval: 123
}
var opts = jQuery.extend(defaults, options), t = this;
return this.each(function(){
var allMs = opts.finish - opts.start
, plus = opts.interval/allMs*100
, devInterval;
$(t)
.progressbar()
.before('<div id="progresspercent"></div>')
.after('<div id="progresstext"></div>');
devInterval = setInterval(function(){
var ms = opts.finish - new Date()
, days = parseInt(ms/86400000)
, hours = parseInt((ms - (days*86400000))/3600000)
, min = parseInt((ms - (days*86400000) - (hours*3600000))/60000)
, sec = parseInt((ms - (days*86400000) - (min*60000)- (hours*3600000))/1000)
, msec = parseInt(ms - (days*86400000) - (sec*1000) - (min*60000)- (hours*3600000))
, percent = ((86400000-ms)/86400000*10000|0)/100;
if(percent >= 100){
percent = 100;
}
var vHours = hours > 9 ? hours : "0" + hours,
vMin = min > 9 ? min : "0" + min,
vSec = sec > 9 ? sec : "0" + sec,
vMsec = msec >= 100 ? msec : "0" + msec,
vMsec = msec > 10 ? vMsec : "0" + vMsec;
$("#progresspercent").html("<b><font color=black>"+percent+"%</font></b>");
$("#progresstext").html("<b><font color=white style='text-shadow: 2px 2px 5px #000;'>До конца дня осталось: "+vHours+":"+vMin+":"+vSec+"</font></b>");
$(t).children(".ui-progressbar-value").css("width", percent+"%");
if(percent >= 100){
time = new Date();
opts.start = time;
opts.finish = (new Date()).setHours(24, m, 0, 0);
}
}
,opts.interval);
});
}
var m = -180 - (new Date()).getTimezoneOffset(); // alert((new Date()).getTimezoneOffset()); алерт запустить в московской зоне -- сейчас -180
var time = new Date();
$("#progressbar").progress({start: time, finish: (new Date()).setHours(24, m, 0, 0), interval: 100});
});
</script>
<style type="text/css">
#progressbar .ui-progressbar-value { background-image: url(http://feex.ru/progressbar/pbar-ani.gif);display:block!important}
#progresspercent {position:relative;left:3px;top:22px;}
.ui-progressbar {height:20px!important;width:550px!important;text-align:left}
body{overflow:hidden;}
</style>
</head>
<body>
<center>
<br>
<h1>PROGRESSBAR</h1>
<div id="progressbar"></div>
</center>
</body>
</html>
