<body>
<div id="background-window">
</div>
<div id='gauge-box'>
<div id='arrow-box'>
<div class='arrow-tile' style='left:0px;'></div>
<div class='arrow-tile' style='left:100px;'></div>
<div class='arrow-tile' style='left:200px;'></div>
<div class='arrow-tile' style='left:300px;'></div>
<div class='arrow-tile' style='left:400px;'></div>
<div class='arrow-tile' style='left:500px;'></div>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#background-window {
background-color: #281248;
font-family: monospace;
font-size: 0.95em;
color: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0.8;
}
#background-window p {
margin: 10px;
}
#gauge-box {
width: 600px;
height: 22px;
position: absolute;
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
background-color: transparent;
border-color: rgba(255,255,255,1);
border-style: none;
z-index: 200;
opacity: 0.5;
}
#gauge-box #arrow-box {
width : 600px;
height : 20px;
position: absolute;
top: 0px;
border-style: solid;
border-width: 1px;
border-color: #f0f;
overflow: hidden;
z-index: 300;
}
#gauge-box .arrow-tile {
width: 100px;
height: 20px;
position: absolute;
float: left;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACMCAYAAABS3P+YAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RUNFRDA3OTYzNUMxMUUzOUJGNUQ3RkJBNzVBQTEzRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RUNFRDA3QTYzNUMxMUUzOUJGNUQ3RkJBNzVBQTEzRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVFQ0VEMDc3NjM1QzExRTM5QkY1RDdGQkE3NUFBMTNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVFQ0VEMDc4NjM1QzExRTM5QkY1RDdGQkE3NUFBMTNFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+uHxnZAAAB59JREFUeNrs3bGS20QABmBJviQklwAdtDbPQUtBwQvk0hPegVDcQ4T+nEeApyG+io6CAmYomBEWWU0WjSTLF3xerb5vxmPncvbZ+2v9S/b5tqzrugCAY1WGAAAFAoACAUCBAKBAACC/AtmIE0CB3KU8mt9HXosUQIEcYxfOr/enrViTsVbqyfCBL3kokBG3+9PzcLqxfSYxQXbhpETSycQOVjrlsZ373Mj1TfTSNioPHInI4rQuMgqjeR/kTbh8ZdtMojTW0dEhipz3OTTl8WL2DySTv4W1joLZ2T4BTi+Xl7BulQeAArkr5QGgQABQIAAoEABQIAAoEAAUCAAKBAAFAgAKBAAFAoACAUCBAKBAACDvArFUZ1peF5axTWluWIUwvTysiZ6YZi30je0ziQnybeHP66fixygXzi+r56jcXsIyScCcSFlWywrnVCDNeujW3k5jgjR7vV8YiiS8zPGJa8beZjXZM1kTHQBHIAAoEAAUCAAoEAAUCAAKBAAFAoACAQAFAoACAUCBAKBAAFAgAKBAAFAgvfxN+rS8NgRJsVInJ5HDeiDxA7Bozvnd7E9X3e3MsCQxP9rlbV8alrPuXD0Ll78P57NdCC+XBaVqT1RJ2Rbv1qhXIvM4QpdNWnlMeu5O4YF4DwSAxR6BeAnL0QfT5kf73tR3huVsmgyehsuvwrmXsBKYJJ6k0pokXmdPR/Mm+s4woEAASIL3QABQIAAoEAAUCAAKBAAUCAAKBAAFAoACAeCdLD+xrUAA7qc8sisRBQJwWmWuRyIKBECJKBAAJaJAAJSIAjm5Zq2DdTgBw/40BEn4OZcSyWU9kC9Ds1fhPL5cdS6voq+1/y7C+Sp836rn+y5Grv/J/nQZTs1qY0/C+eP96aNw/iicmtt5Fq779/70oPNYvonua1zyq7CxrXq+PvbvMvp393IV3Wbd+bnxbcXf03gVjdFF9H2tz3t+fnzenuqe+1J1vrfqXCe+jdXIYys7j2fV8/NXB67XnP8S3a9Dj6c73nXnfOj63T3T+D63289lOP84XH4WLj8Nl59G2+CTsK01130YMmq+9le4zc+K/y7C1s2jGHhM3cdaDIzf2PWrkduqDmwjzem3nvHqu/9F9LVywnX6vu8izM/2/FEYz0ed0+NwehiNezz+7dcfhPFvb/Or6P5cRvOrHNnZr3vGtzvGfeMwdBRURbfZvTw2vv9ezu0lrLEAxr42NFhjewjlwM+tO9fvC688cIhb9/zceuDn1wPj0L2NQ3sK5cD9GJp4Y7c79P/lHQ7n64HbKUceXz2QS98T9pQxKo8Yt2JgUg89hr7TlPE6NGbd26mOeJzlxJ9ZjuQ1tM3WPdvo2JwoB65fTByLcuJYlkduu2PPAWM5lhPv/9j1y4lzeepzV3lgbPu2qWyOQDbRA7wtgCF/FO/X4+Z8ftqfvp64E+IlLAAmH9nMht/CAlAeCgRAeSgQAOWhQACUR27loUAATq/MsTwUCMD9logCAQAFwofyQSJ5sNA8qhmGUZskyU0OeciDBeYxtwLJdmWvmZKHPFhwHpVQkIc8kMdSCsQkkQfykIcCEYpJgjzkoUCEgjzkwaLyqISCPOSBPJZaICZJejbyMD/IP49mQalPBx7Y0NeqgQfeXTJzbOnFqpi+fGh3sMdK79fo8sOB+9xdJ7m7pOPYUpL1EWNw6PF0l5Bsr/v7jEujO75vD2xb3K9aHvI4xRHI1A/nlUX/us7d2zi0Ju8xa0/XPU/+fesqTw2q7+vlkWHXPWVTHXn7fRtPnenkADJ0MeM9XntXadlFl9edf8vD/CDDPCphcOIykYf5QaZ5VMJAHvJAHkssEJNDHshDHgpEGCYH8pCHAhGGyYE8yD6PShjIQx7IYwkFYnLIA3nIQ4HcSVmMf8Kd+8/Dk5U8WGgec38Ji/PbGoKkbAxBkiWiQBIqDyWSTnlcySOp8riWR3KZ3GTbjnU9u23N67zyQB5zcRN2srLMY44FYpLIA3nIIwHWREce8kAeiyoQk0QeyEMeCkQoJgnykIcCEQrykAeLycOa6MhDHshj0QViksgDechDgQCgQO6X332XB/KQhwIxOeSBPOShQIRhciAPsszDmujIQx7IY3EFYnLIA3nIQ4EIw+RAHvJQIMIwOZAHrZuc87AmOh9iK4+kNIsXvZFHUn4ImWSZx1wXlDI50iqRK8OQjPX+dGsYUCAAJGuub6KvRQegQO5SHtdFxgvVzzQTpQ4KJHnt67vN6+5ef0tHU+pbw5CMjVJHgfSL37RVImmUei2PpLQ5OFJP72g9G3N/E92v9cqDYdsolxeGI4mjwjra6XIEcu4CdCQiDxypz8QumiNZvNyby6/x2vOVB/KY25Fht+QdgdjzRR7yYNKR4fO555HbBwntackDecjDEQgACkSb27tCHsSy+Cu91kRHHvLgfm1DDtvCmugmB/JI/MlqK49kNB8kfFVk8tkca6Ijj3zdFO+XP5BHGuXRyuKDndZE5/98srKnm96ebsN6LWloP32+y+UBzbVArISXlk2UgzzS4k+YpFkiWZjj50DaP+fu7/ukVSB1YSU8WJS5fpBwk9NhIMAczfUlLOUBcGb/CDAAg/Hdo6fAMk4AAAAASUVORK5CYII=);
background-position: 0px 0px;
overflow: hidden;
}
var body = document.body,
backgroundWindow = document.getElementById("background-window"),
gaugeBox = document.getElementById("gauge-box"),
frame = 0,
currentSprite = 0;
startProgressBar();
function startProgressBar () {
var arrowBoxStyle = document.getElementById("arrow-box").style,
tiles = document.getElementsByClassName("arrow-tile"),
tilesLength = tiles.length,
tileSize = {
width : 100,
height : 20
},
framerate = 16;
setInterval(draw, framerate);
function draw () {
if (++frame % 2 === 0) {
for (var i = 0; i < tilesLength; i++) {
tiles[i].style.backgroundPosition =
currentSprite % 4 * -tileSize.width + "px " +
(currentSprite / 4 | 0) * -tileSize.height + "px"
;
}
currentSprite = ++currentSprite % 28;
}
frame %= 100;
arrowBoxStyle.left = -100 + frame % 100 + "px";
}
}