The title pretty much explains exactly what I need. But I simply want to place this as a sort of widget on one of my pages, and I want the loader to direct the page to another URL once it is done loading. I'll delay the speed of the loader later. Hopefully this isn't such a hard task. Help me out. Thanks.

Here's the fiddle https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

I also put the Javascript down below:

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

bar.animate(1.0);  // Number from 0.0 to 1.0

Here's the CSS

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

And here is the html

<div id="container"></div>