Stretch Goal Display Code For Kickstarter

stretch-goal.css

#custom-sg {
  padding: 15px;
  background-color: #efefef;
}

#sg-progress {
  height: 12px;
  background-color: #cccccc;
  border-radius: 25px;
}

#sg-progress-bar {
  height: 12px;
  background-color: #76cc1e;
  border-radius: 25px;
  width: 10%;
}

#sg-meta {
  margin-top: 15px;
  height: 45px;
}

#sg-percent {
  padding-right: 15px;
  float: left;
  padding-right: 7px;
}

#sg-goal {
  padding-left: 15px;
  border-left: solid 1px #cccccc;
  float: left;
  padding-right: 7px;
}

.sg-meta-value {
  font-weight: bold;
  font-size: 1.3em;
}

.sg-meta-msg {
  color: #aaaaaa;
}

stretch-goal.html

<div id="custom-sg">
  <link rel="stylesheet" type="text/css" href="https://gist.github.com/mcwhittemore/5528675/raw/5cac902d1340d8888d820ab4c77d7ea355cb7559/stretch-goal.css">
  <script>
    var goal = 250000;
  </script>
  <script src=""></script>
  <div id="sg-explain"></div>
  <div id="sg-progress">
    <div id="sg-progress-bar"></div>
  </div>
  <div id="sg-meta">
    <div id="sg-percent">
      <div class="sg-meta-value">10%</div>
      <div class="sg-meta-msg">funded</div>
    </div>
    <div id="sg-goal">
      <div class="sg-meta-value">10%</div>
      <div class="sg-meta-msg">funded</div>
    </div>
  </div>
</div>

stretch-goal.js

var html = '<div id="sg-progress"><div id="sg-progress-bar"></div></div><div id="sg-meta"><div id="sg-percent"><div class="sg-meta-value"></div><div class="sg-meta-msg">funded</div></div><div id="sg-goal"><div class="sg-meta-value"></div><div class="sg-meta-msg">stretch goal</div></div></div>';

$("#sg-display").html(html);

$("#sg-goal .sg-meta-value").html(goal);

var oPledged = 0;

var update = function(){
	var pledged= $("#pledged").data('pledged');
	if(pledged>=oPledged){
		var percent = Math.round((100/goal)*pledged);
	  $("#sg-percent .sg-meta-value").html(percent);
	  $("#sg-progress-bar").css("width", percent+"%");
	  oPledged = pledged;
	}
}

update();

setInterval(update, 1000);