mixin ProgressbarDemo(config)
  - var config = Object.assign({height: 15,value:70}, config)
  .progress(style=`height:${config.height}px`, role='progressbar', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100').mb-3
    .progress-bar&attributes(attributes)(style=`width: ${config.value}%`)
      if config.display
        | #{config.value}%
  

mixin ProgressbarMultipleColorDemo
  .progress-stacked
    .progress(role='progressbar', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100', style='width: 15%')
      .progress-bar
    .progress(role='progressbar', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100', style='width: 30%')
      .progress-bar.bg-success
    .progress(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100', style='width: 20%')
      .progress-bar.bg-info


mixin ProgressbarAnimatedDemo
  .progress(role='progressbar', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
    .progress-bar.progress-bar-striped#progress-toggle(style='width: 75%')
  button.btn.btn-secondary.btn-sm.mt-2(type='button' data-progress-animation="progress-toggle") Toggle Animation