Smcner12 Smcner12 -4 years ago 70
CSS Question

Is it possible to fill an icon to a percentage?

I was wondering if there is a way to fill a specific icon or sprite to a designated percentage - i.e. 20% or something like that. I am trying to create a responsive shape or image that will serve as fluid chart, of sorts. I know the below is not a great example - the svg is also in font form. I want to dynamically fill this image to a specified % in my code.

So let's say a data point reads 20%, I want the heart to fill with another color (e.g. color:#DA1C5C) up to 20%, leaving the rest the original color. The code I'm working with is using a straight icon font and not the image svg, but it's not hosted yet.

<div class="icon">
<i class="icon-doubleheart">
<img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg">
</i>



Answer Source

With SVG: fiddle

HTML:

<div class="icon">
    <div id='blackIcon' class="icon-doubleheart">
        <img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg"/>
    </div>
    <div id='holdci'>
        <div id='colorIcon' class="icon-doubleheart">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
            <g>
                <path class='newColor' d="M353.1,137c-37.2-17.2-85.9-1-103.1,36.1c-17.2-37.1-65.9-53.3-103.1-36.1c-27.5,12.7-45,39.2-42.7,72.8h0.2   c1.4,14.1,6.1,29.4,15.2,45.5c22.2,39.4,61.6,69.1,130.3,122.3c68.7-53.2,108.1-82.9,130.3-122.3c9.1-16,13.8-31.3,15.2-45.5h0.2   C398,176.2,380.5,149.7,353.1,137z"/>
                <path class='newColor' d="M493.5,124c-11.1-34.6-36.2-62.5-70.5-78.6c-18.8-8.8-40-13.4-61.4-13.4c-45.8,0-87.4,20.7-111.6,54.2   c-24.2-33.5-65.8-54.3-111.6-54.3c-21.3,0-42.6,4.6-61.4,13.4c-34.4,16-59.4,44-70.6,78.6C0,144.3-3.9,173.4,6,209.7h0.7   c4.3,14.9,10.8,31,20.4,48.2c36.1,64.4,99.1,113.5,203.5,194.8l19.4,15.1l19.5-15.2C373.9,371.4,436.9,322.3,472.9,258   c9.7-17.2,16.2-33.3,20.4-48.2h0.7C503.9,173.4,500,144.3,493.5,124z M468.8,207.2h-0.7c-4,12.6-9.6,25.5-16.9,38.6   c-33.6,60-95.1,107.9-197,187.3l-4.2,3.3l-4.1-3.2C144,353.7,82.4,305.8,48.8,245.8c-7.3-13-13-25.9-16.9-38.5h-0.7   c-8-26.8-8.4-52.4-1-75.5c9-28,29.4-50.6,57.4-63.7c15.6-7.3,33.2-11.1,50.9-11.1c44.3,0,83.7,23.2,100.3,59.1l11.3,24.5l11.3-24.5   C277.9,80.2,317.2,57,361.6,57c17.7,0,35.3,3.8,50.9,11.1c28,13.1,48.4,35.7,57.3,63.6C477.2,154.8,476.8,180.4,468.8,207.2z"/>
        </g>
        </svg>
        </div>
    </div>
</div>

CSS:

.icon {
    width: 10em;
    height: 10em;
}
#blackIcon {
    width: 100%;
    height: 100%;
}
#holdci {
    margin-top: -100%;
    overflow: hidden;
    width: 0;
    height: 99%;
}
#colorIcon {
    width: 10em;
    height: 10em;
}
.newColor {
    fill: #DA1C5C;
}

JS:

var fill = 0;
var update = setInterval(function() {
    fill += 1;
    if (fill <= 100) {
        $('#holdci').css('width', (fill+'%')); 
    } else {
        clearInterval(update);        
    }
}, 100);

With pure CSS: HTML:

<div id='Icon'>
    <div id='IconText'>f</div>
    <div id='fillIcon'></div>
</div>

CSS:

#Icon {
    position: absolute;
    width: 2em;
    height: 2em;
    border: 0.125em solid blue;
    border-radius: 0.2em;
}
#fillIcon {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 0;
    margin-top: 100%;
    background-color: blue;
}
#IconText {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    line-height: 150%;
    text-align: center;
    color: #cccccc;
    font-weight: bold;
    font-family: consolas;
    font-size: 1.5em;
}

JS:

var fill = 0;
var update = setInterval(function() {
    fill += 1;
    $('#fillIcon').css('height', (fill+'%')); 
    $('#fillIcon').css('margin-top', ((100 - fill)+'%')); 
    if (fill === 100) {
        clearInterval(update);        
    }
}, 100);

With an image: fiddle

HTML:

<div id='Icon'>
    <div id='IconText'><img style='width: 100%; height: 100%;' src='http://bellybusting.com.au/wp-content/uploads/2014/03/fb.jpg'/></div>
    <div id='fillIcon'><img style='width: 2em; height: 2em;' src='http://getdesign.org/wp-content/uploads/2013/08/Facebook-icon-with-green-background-56.png'/></div>
</div>

CSS:

    #Icon {
    position: absolute;
    width: 2em;
    height: 2em;
}
#fillIcon {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 0%;
    margin-top: 0;
    overflow: hidden;
}
#IconText {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    line-height: 150%;
    text-align: center;
    color: #cccccc;
    font-weight: bold;
    font-family: consolas;
    font-size: 1.5em;
}

JS:

var fill = 0;
var update = setInterval(function() {
    fill += 1;
    $('#fillIcon').css('height', (fill+'%')); 
    //$('#fillIcon').css('margin-top', ((100 - fill)+'%')); 
    if (fill === 100) {
        clearInterval(update);        
    }
}, 100);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download