Loaders

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

Tutorials

Add loaders to the story

1. Add Code Block anywhere in your story

2. Open your Code Block and insert the following code snippet to add the loader

<div id="circle1" data-foregroundColor="#00758f" data-backgroundColor="#eee" data-percent="64" data-percentageX="100" data-percentageY="108"></div>
<script async="async" src="https://d3ab9omd0xmpv4.cloudfront.net/attachments/media/17003/original/jquery.circliful.min.js"></script>
  <script>
  function drawTheCircle() {
    $('#circle1').html('')
    $("#circle1").circliful({
      foregroundColor: "#00758f",
      backgroundColor: "#eee",
      pointColor: "none",
      fillColor: 'none',
      foregroundBorderWidth: 15,
      backgroundBorderWidth: 15,
      pointSize: 28.5,
      fontColor: '#252525',
      percent: 75,
      animation: 1,
      animationStep: 5,
      icon: 'none',
      iconSize: '20px',
      iconColor: '#999',
      iconPosition: 'top',
      iconDecoration: true,
      target: 0,
      start: 0,
      showPercent: 1,
      percentageTextSize: 22,
      percentageX: 100,
      percentageY: 108,
      textAdditionalCss: '',
      targetPercent: 0,
      targetTextSize: 17,
      targetColor: '#2980B9',
      text: null,
      textStyle: null,
      textColor: '#666',
      textY: null,
      textX: null,
      multiPercentage: 0,
      percentages: [],
      multiPercentageLegend: 0,
      textBelow: false,
      noPercentageSign: false,
      replacePercentageByText: null,
      halfCircle: false,
      animateInView: false,
      decimals: 0,
      alwaysDecimals: false,
      title: 'Lorem ipsum 1',
      description: '',
      progressColor: null
    });
  }
  
  drawTheCircle();
  
  $(window).on("scroll", function(){
    if(document.querySelector("#circle1")) {
      var hT = $('#circle1').offset().top, hH = $('#circle1').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop();
    }
    if (wS > (hT+hH-wH)){
      drawTheCircle()
    $(window).off("scroll")
    }});
  </script>
  
  <style>
    #circle1 {
      max-width: 250px;
      margin: 0 auto;
      height: 250px;
    }
  </style>

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

Already an experienced user?

See what else you can do to enhance your story.