LOADING
Add Loaders to the Story
Published on 9/19/2018
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