LOADING

Step 1. Add CODE BLOCK anywhere in your story.

Step 2. Open your Code Block and insert the following code snippet:

<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>

This is how your loader will look like in View mode (in the published story)

Example