рони,
прикольно))
но все-таки интересует именно первоначальный вариант бара...
я немного изменил Ваш вариант. Но это всё не то..
В общем, ладно.. не судьба значит
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
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;
margin-top: 25px;
}
#bar {
height:22px;
//width:550px!important;
text-align:center
position: absolute;
top: 0;
left: 0;
height: 1.5em;
background-image: url(http://feex.ru/progressbar2/pbar-ani.gif);
//background: red;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 1px 1px 6px 0px #333;
box-shadow: 1px 1px 6px 0px #333;
-o-transition: 1s width ease;
-ms-transition: 1s width ease;
-moz-transition: 1s width ease;
-webkit-transition: 1s width ease;
transition: 1s width ease;
width: 0;
overflow: hidden;
margin-top: 20px;
text-align: center;
color: #000;
font-size: 1.0em;
line-height: 1.5em;
font-weight:bold;
border-radius: 3px 3px 3px 3px;
border: 1px solid grey;
}
/*
#bar:before {
content: '';
display: block;
position: absolute;
width: 10px;
height: 100%;
-webkit-animation: trololo 8s linear infinite;
-moz-animation: trololo 8s linear infinite;
-o-animation: trololo 8s linear infinite;
animation: trololo 8s linear infinite;
background: -o-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: -moz-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: -webkit-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
margin-left: -25px;
}
@keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
@-webkit-keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
*/
#show{
margin:5 auto ;
text-align: center;
}
</style>
<center>
<h1>PROGRESSBAR 2</h1></center>
<div id="bar" class="zero-width"></div>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return two(c) + " " + hours(c) + " " + two(b) + " " + minutes(b) + " " + two(a) + " " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('сек.', 'сек.', 'сек.');
function Time() {
var data = Date.parse('01/01/2016') // дата начала 1 шестидневки строго "месяц/день/год"
data = new Date(data);
data.setMinutes((-180 - data.getTimezoneOffset()), 0, 0); //для коррекции запустить в зоне акции alert((new Date).getTimezoneOffset()) и поменять число
for (; (new Date).getTime() > data; ) {
data.setDate(data.getDate()+1)//через сутки +1 , через 6 дней +6
}
var a = data.getTime() - (new Date).getTime();
var pos = ((86400000-a)/86400000*10000|0)/100;
document.getElementById('bar').style.width= pos +'%';
document.getElementById("bar").innerHTML = pos +'%'
document.getElementById("show").innerHTML = "<b><font color=white style='text-shadow: 2px 2px 5px #000;'>До конца дня по Москве осталось: " + formatTime(a) + "</font></b>";
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>