Raisely Progress Bar in Streamlabs

progress.html

<div class="progress-bar progress-bar--size-large progress-bar--style-rounded">
  <div class="progress-bar__progress">
    <span class="progress-bar__total">0</span>
    <span class="progress-bar__goal">0</span>
    <span class="progress-bar__bar progress-bar__bar--animated">
      <span class="progress-bar__total">0</span>
      <span class="progress-bar__goal">0</span>
    </span>
  </div>
</div>

script.js

/**
  Javascript to fill and update progress bar used in Streamlabs
*/
// Events will be sent when someone donates
// Please use event listeners to run functions.
var currency = '$';

function setProgress(obj) {
    console.log('Setting progress', obj.detail);
    $('.progress-bar__progress .progress-bar__total').text(currency + Math.round(obj.detail.amount.current) + ' raised');
    var percent = obj.detail.amount.current / obj.detail.amount.target * 100;
    console.log(percent)
    $('.progress-bar__bar').width('' + percent + '%');
}

document.addEventListener('goalLoad', function(obj) {
  // obj.detail will contain information about the current goal
  // this will fire only once when the widget loads
  console.log(obj.detail);
  $('#title').html(obj.detail.title);
  $('.progress-bar__progress .progress-bar__goal').text(currency + obj.detail.amount.target + ' goal');
  $('#goal-end-date').text(obj.detail.to_go.ends_at);
  setProgress(obj);
});
document.addEventListener('goalEvent', function(obj) {
  setProgress(obj);
});

style.css

@import url('https://cdn.raisely.com/v3/core-styles.css');
/* Insert the path or uuid of your campaign below to import it's styles */
@import url('https://api.raisely.com/v3/campaigns/YOUR_CAMPAIGN_PATH/styles.css?cssReloader=123456789');


/* White border for visibility */
.progress-bar__progress {
  border: 2px solid white;
  box-sizing: content-box;
}