ALLOY UI - Orange progress bar

* centered * custom color * custom border color

by katalin_2003

HTML

<link rel="stylesheet" href="https://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css">
<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
* Orange progres bar
<div id="myProgressBar" class="aui-progress-warning"></div>

CSS

#myProgressBar {
  width: 90%;
  margin: 0 auto;

  /* border: 1px solid #000000; */
}

#myProgressBar > div {
  background-color: tomato;
}

JavaScript

var csa = 80;

YUI().use(
  'aui-progressbar',

  function(Y) {
    var b = new Y.ProgressBar({
      boundingBox: '#myProgressBar',
      label: csa + ' %',
      max: 100,
      min: 0,
      on: {
        complete: function(e) {
          this.set('label', 'Complete!');
        },
        valueChange: function(e) {
          this.set('label', e.newVal + '%');
        }
      },
      value: csa
      /*,
      width: '90%'*/
    }).render();
    b.value = 90;
  });

setTimeout(function() {
  document.getElementById("myProgressBar").style.border = "1px solid #000";
}, 100);