Filling Colors in an Image Based on Certain Percentage

In this article we will learn how to fill colors in the image based on certain percentage.

After logging into Helical Insight, navigate to “Dashboard Designer“.

Then Switch to Advanced Mode to use the HTML, CSS and JavaScript coding.

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