Feex,
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#bar {
position: absolute;
top: 0;
left: 0;
height: 1.4em;
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: 50px;
text-align: center;
color: #FFFFFF ;
font-size: .8em;
line-height: 1.4em;
}
#bar:before {
content: '';
display: block;
position: absolute;
width: 80px;
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:0 auto ;
text-align: center;
}</style>
<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 = "До конца дня по Москве осталось: " + formatTime(a);
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>