Default style

  const uProgress = new UProgress();
  
  document.getElementById('expl1-start').addEventListener('click', () => {
    uProgress.start();
  });
  
  document.getElementById('expl1-done').addEventListener('click', () => {
    uProgress.done();
  });

Custom style

  @import 'uprogress/mixin';
  
  @include uprogress('uprogress-purple', 2px, #713ed0);
  @include uprogress('uprogress-lg', 8px);
  @include uprogress($name: 'uprogress-bottom', $position: 'bottom');
  @include uprogress('uprogress-multi', 5px, #17a0d3, #713ed0, #fc8d03, #17a0d3));

  const uProgress = new UProgress({class : 'purple-progress'});
  
  document.getElementById('expl2-start').addEventListener('click', () => {
    uProgress.start({class: 'uprogress-purple'});
  });
  
  document.getElementById('expl2-purple').addEventListener('click', () => {
    uProgress.options({class: 'uprogress-purple'});
  });
  document.getElementById('expl2-lg').addEventListener('click', () => {
    uProgress.options({class: 'uprogress-lg'});
  });
  document.getElementById('expl2-bottom').addEventListener('click', () => {
    uProgress.options({class: 'uprogress-bottom'});
  });
  document.getElementById('expl2-multi').addEventListener('click', () => {
    uProgress.options({class: 'uprogress-multi'});
  });
  
  document.getElementById('expl2-done').addEventListener('click', () => {
    uProgress.done();
  });

Right to left

  const uProgress = new UProgress({rtl: true});
  
  document.getElementById('expl1-start').addEventListener('click', () => {
    uProgress.start();
  });
  
  document.getElementById('expl1-done').addEventListener('click', () => {
    uProgress.done();
  });

Within container

  const uProgress = new UProgress(document.getElementById('container-expl'));
  
  document.getElementById('expl4-start').addEventListener('click', () => {
    uProgress.start();
  });
  
  document.getElementById('expl4-done').addEventListener('click', () => {
    uProgress.done();
  });