Bootstrap html snippet. bs4 alpha Dynamic Loading progress Bar

HTML code

Clean, semantic HTML that powers this Bootstrap 4.0.0-alpha.5 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.



<div class="container">
  <div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; <span id="percentage" class="tag tag-default">0</span>%</div>

  <div class="parent">
    <progress class="progress progress-striped" value="0" max="100"></progress>
    <div class="child">
      <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-secondary" value="25" name="success">25%</button>
        <button type="button" class="btn btn-outline-secondary" value="50" name="info">50%</button>
        <button type="button" class="btn btn-outline-secondary" value="75" name="warning">75%</button>
        <button type="button" class="btn btn-outline-secondary" value="100" name="danger">100%</button>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 4.0.0-alpha.5 to keep the design, spacing, and responsiveness consistent.

body{
    background:#eee;    
}

.progress {
  height: 2.3em;
  margin-bottom: 0;
}
.btn-group {
  width: calc(100% + 3px);
}
.btn-group > .btn {
  width: 25%;
}
.btn-group > .btn:focus {
  outline: none;
  background-color: transparent;
}
.parent {
  position: relative;
  width: 100%;
  background:#fff;
}
.child {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
}

Javascript/Jquery code

Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 4.0.0-alpha.5) to mirror the live demo.


$.fn.removeClassMatch = function(rexp) {
  return $(this).removeClass((i, className) => {
    return (className.match(rexp) || []).join(' ');
  })
}

let progressQueue = limit => {
  controlButton(true);
  
  for (let v = 0; v <= limit; v++) {
    $('progress').delay(50).queue(function() {
      $('#percentage').text(`${v}`);
      $(this).val(`${v}`).dequeue();
      // console.log($(this).queue().length);
      if ($(this).queue().length === 0) {
        controlButton(false);
      }
    })
  }
}

let controlButton = flg => {
  $button = $('button');
  $button.css({ 'color': 'white' });
  $button.prop('disabled', flg);
}

let addClassToProgress = name => {
  let $progress = $('progress');
  $progress.removeClassMatch(/progress-.+/g)
    .addClass(`progress-striped progress-${name}`);
}

let addClassToButtons = name => {
  let $button = $('button');
  $button.removeClassMatch(/btn-outline-.+/g)
    .addClass(`btn-outline-${name}`);
}

let addClassToTag = name => {
  let $tag = $('.tag');
  $tag.removeClassMatch(/tag-.+/g)
    .addClass(`tag-${name}`);
}

$('button').on('click', function() {
  let [type, limit] = [$(this).attr('name'), parseInt($(this).val())];
  
  addClassToProgress(type);
  addClassToButtons(type);
  addClassToTag(type);
  progressQueue(limit);
})