ZeroEmpires Stream Viewer Bar

live.html

<style>
#percentage-wrap {
  position: relative;
  height: 1800px;
}

#percentage-background {
  top: 0;
  left: 0;
  background: #f00;
  position: absolute;
  width: 1158px;
  transition: height 1s;
  -webkit-transition: height 1s;
  -moz-transition: height 1s;
  z-index: 0;
}

#percentage-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>
<div id="percentage-wrap" class="aligncenter">
  <div id="percentage-background"></div>
  <img src="http://zeroempires.net/Stream-Goals.png">
</div>
<script>
// config
var target = 4000 // viewers
  , fullHeight = 1800 // px
  , barOffset = 199 // px at 400 viewers
  , barHeight = 1610 - barOffset // px height at 4000 viewers
  , channel = 'zeroempires'
  , interval = 30 // seconds

// code
var el = document.getElementById('percentage-background')
  , script
  , lastViewers

function update() {
  script = document.createElement('script')
  script.src = 'https://api.twitch.tv/kraken/streams/' + channel + '?callback=onApiResponse'
  document.body.appendChild(script)

  setTimeout(update, interval * 1000)
}

function onApiResponse(x) {
  document.body.removeChild(script)
  if (x.stream) {
    setViewers(x.stream.viewers)
  }
  else {
    setViewers(0)
  }
}

function setViewers(viewers) {
  if (lastViewers === viewers) return
  lastViewers = viewers
  el.style.height = viewers === 0 ? '0px' : Math.max(barOffset - 50, Math.min(barOffset + (viewers - 400) / (target - 400) * barHeight, fullHeight)) + 'px'
}

update()

</script>

live.min.html

<div class="aligncenter" style="position: relative; height: 1800px;">
  <div id="percentage-background" style="top: 0;left: 0;background: #f00;position: absolute;width: 1158px;transition: height 1s;-webkit-transition: height 1s;  -moz-transition: height 1s;z-index: 0;"></div>
  <img width="1158" height="1800" src="http://zeroempires.net/Stream-Goals.png" style="position: absolute;top: 0;left: 0;z-index: 1;">
</div>

<script>var target=4E3,fullHeight=1800,barOffset=199,barHeight=1610-barOffset,channel="zeroempires",interval=30;var el=document.getElementById("percentage-background"),script,lastViewers;
function update(){script=document.createElement("script");script.src="https://api.twitch.tv/kraken/streams/"+channel+"?callback=onApiResponse";document.body.appendChild(script);setTimeout(update,interval*1E3)}
function onApiResponse(x){document.body.removeChild(script);if(x.stream)setViewers(x.stream.viewers);else setViewers(0)}
function setViewers(viewers){if(lastViewers===viewers)return;lastViewers=viewers;el.style.height=viewers===0?"0px":Math.max(barOffset-50,Math.min(barOffset+(viewers-400)/(target-400)*barHeight,fullHeight))+"px"}
update();</script>