Progress bars

From structural elements to rich media options, see what Fabl can do for you.

Tutorials

Add progress bars to the story

Subject introduction text, lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

1. Add Code Block anywhere in your story

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

  <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) + ' %')
      });
      $(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(0.84);
          $(window).off("scroll")
        }
      });
    }
    cb(function() {
      lineTheBar();    
    })
  </script>
  
  <style>
    #progressBarWrapper {
      min-height: 30px;
      height: 100%;
      display: flex;
      align-items: flex-end;
      position: relative;
      width: 80%;
      margin: auto;
    }
  </style>

3. This is how the progress bar will look like in View mode (in the published story)

Already an experienced user?

See what else you can do to enhance your story.