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


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>
  function drawTheCircle() {
      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
  $(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)){
    #circle1 {
      max-width: 250px;
      margin: 0 auto;
      height: 250px;

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