<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: 20px; 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; overflow: hidden; z-index: 200; opacity: 0.5; } #gauge-box #arrow-box { width : 600px; height : 20px; position: absolute; top: 0px; overflow: hidden; z-index: 300; } #gauge-box .arrow-tile { width: 98px; height: 18px; position: absolute; float: left; border-style: solid; border-width: 1px; border-color: #f0f; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACMCAYAAABS3P+YAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1RUNFRDA3OTYzNUMxMUUzOUJGNUQ3RkJBNzVBQTEzRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1RUNFRDA3QTYzNUMxMUUzOUJGNUQ3RkJBNzVBQTEzRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVFQ0VEMDc3NjM1QzExRTM5QkY1RDdGQkE3NUFBMTNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVFQ0VEMDc4NjM1QzExRTM5QkY1RDdGQkE3NUFBMTNFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+uHxnZAAAB59JREFUeNrs3bGS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); background-position: 0px 0px; overflow: hidden; }
var body = document.body, backgroundWindow = document.getElementById("background-window"), gaugeBox = document.getElementById("gauge-box"), currentSprite = 0; startProgressBar(); function startProgressBar () { var tiles = document.getElementsByClassName("arrow-tile"), tilesLength = tiles.length, tileSize = { width : 100, height : 20 }, framerate = 32; setInterval(draw, framerate); function draw () { 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; } }