advanced features
Litehouse Create Loaders
From structural elements to rich media options, see what Litehouse Create can do for you.
In this tutorial you can find the steps on how to add loaders to a story.
1. Add a new code block
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)