Drag and drop HTML component into the canvas and then click on edit icon to enter the HTML code. Here, Image should have a transparent area for the background to be visible.
HTML Code:<div class="prog">
<div id="filler" class="filler">
<img id="image" class="image" src ="http://chriskavas.com/CKImages/twitter-logo-1transparent.png"/>
</div>
</div>
Here is the output for the above HTML code.
For more customizations, we will be using CSS and Javascript code.
CSS Code:
.prog {
width:100px;
height:100px;
background: aqua;
overflow:hidden;
}
.filler {
width:100%;
height:0px;
background:#DDD;
}
.image{
width:100px;
height:100px;
}
Here is the Output for CSS Code
Set the interval for colour rise every 1%
Javascript Code:
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 100;
return function progress() {
filler.style.height = percentage + "%";
percentage -=1;
if (percentage >= (100 - 80)) { //(100 - percent_to_show)
setTimeout(progress, stepSize);
}
}
}()), stepSize);
Here is the Final Output
For More Info, Contact us at demo@helicalinsight.com