Add Progress Bars to the Story

Step 1. Add CODE BLOCK anywhere in your story.

Step 2. Open your Code Block and insert the following code snippet to add a progress bar:

  <script src="//d3ab9omd0xmpv4.cloudfront.net/attachments/media/18638/original/progressbar.min.js"><script>
  
  <div id="progressBarWrapper"></div>
  
  <script>
    function lineTheBar(){
      let bar = new ProgressBar.Line('#progressBarWrapper', {
        strokeWidth: 1,
        easing: 'easeInOut',
        duration: 2000,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: {
          width: '100%',
          height: '100%'
        },
        text: {
          style: {
            color: '#999',
            position: 'absolute',
            right: '0',
            top: '0',
            padding: 0,
            margin: 0,
            transform: null
          },
          autoStyleContainer: false
        },
        from: {color: '#FFEA82'},
        to: {color: '#FFEA82'},
        step: (state, bar) => bar.setText(Math.round(bar.value() * 100) + ' %')
      });
      bar.animate(0.85);
      $(window).on("scroll", function() {
        if(document.querySelector("#progressBarWrapper")) {
          var hT = $('#progressBarWrapper').offset().top, hH = $('#progressBarWrapper').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop();
        }
        if (wS > (hT+hH-wH)){
          bar.animate(1);
          $(window).off("scroll")
        }
      });
    }
    
    lineTheBar()
  </script>
  
  <style>
    #progressBarWrapper {
      min-height: 30px;
      height: 100%;
      display: flex;
      align-items: flex-end;
      position: relative;
      width: 80%;
      margin: auto;
    }
  </style>

Preview results below