Bootstrap Reverse Animated Progress Bar Like Github

When importing new repos to Github using the migration tool here there is a nice and simple Reverse Progress Bar example made with Bootstrap 3. I'm trying to reproduce this progres

Solution 1:

I have added an initial width to the element, see comment in code

/**
 * Bootstrap Progress Bar
 * @author Loreto Parisi (loretoparisi@gmail.com)
 */UpdateUIProgressBar = function(containerId, progress, text) {
  text = text || ''if (!$('#progressdiv').length) {
    var progress = '<div id="progressdiv" class="progress"><div id="progressbardiv" class="progress-bar" role="progressbar" style="min-width:1em;width:0%;">' + text + '</div></div>'
    $('#' + containerId).append(progress);
  } else {
    $('#progressbardiv').text(text);
    $('#progressbardiv').attr('style', 'min-width: 1em;width: ' + progress + '%;');
    $('#progressbardiv').attr('aria-valuenow', progress);
    if (progress == 100) {
      setTimeout(function() {
        $("#progressdiv").remove();
      }, 1000 * 2);
    }
  }
} //UpdateUIProgressBar/**
 * Bootstrap Reverse ProgressBar inspired to Github UI
 * @author Loreto Parisi (loretoparisi@gmail.com)
 */varUpdateUIReverseProgressBar = function(containerId, progress) {
  if (!$('#revprogressdiv').length) {
    /* added width 0px in the following */var progress = '<div id="revprogressdiv" class="reverse-progress-container"  style="width: 0px;"><div id="revprogressdiv" class="reverse-progress-bar anim-shrink-x" role="progressbar" style="min-width:1em;width:0%;"></div></div>'
    $('#' + containerId).append(progress);
  } else {
    $('#revprogressdiv').attr('style', 'min-width: 1em;width: ' + progress + '%;');
    if (progress == 100) {
      setTimeout(function() {
        $("#revprogressdiv").remove();
      }, 1000 * 2);
    }
  }
} //UpdateUIReverseProgressBarvar perc = 0,
  step = 10;
var interval = setInterval(function() {
  perc = perc + step;
  UpdateUIReverseProgressBar('myreverseprogress', perc);
  UpdateUIProgressBar('myprogress', perc);

  if (perc >= 100) clearInterval(interval);
}, 1000)

.reverse-progress-container {
  position: relative;
  height: 3px;
  background-color: #e5e9eb;
  background-image: -webkit-linear-gradient(left, #599e47, #306a94, #492860, #c03d32, #d17337);
  background-image: linear-gradient(to right, #599e47, #306a94, #492860, #c03d32, #d17337);
  background-size: 100%3px;
}

.anim-shrink-x {
  -webkit-animation-name: shrink-x;
  animation-name: shrink-x;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css.map" /><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" /><divclass="panel panel-default"><divclass="panel-body"><divclass="reverse-progress-container" ><divstyle="width: 0%; min-width: 0%; animation-duration: 5s;"class="reverse-progress-bar anim-shrink-x"></div></div></div></div><divclass="panel panel-default"><divclass="panel-body"><divclass="progress"id="myreverseprogress"></div></div></div><divclass="panel panel-default"><divclass="panel-body"><divclass="progress"id="myprogress"></div></div></div>