<div class="tab-pane" id="hrtab">
                                <div class="row vitalsrow">
                                    <div class="col-md-12">
                                        <h3>
                                            <span>Last</span>
                                            <span class="semi-bold hrTitle">Heart Rate:</span>
                                        </h3>
                                        <div class="encVitals heartRate">
                                            <h2 class="lastReading hrValue danger">96</h2>
                                            <span class="hrUnit">bpm</span>
                                            <span class="hrDate">
                                                <a href="#" title="By Dr. Sam Willis">06/28/2014</a>
                                            </span>
                                        <div class="vitals-graph">
                                            <div class="hrGraph">
                                                <div id="noFill">
                                                    <img src="https://s3.amazonaws.com/yourcareassets/double-heart-empty.svg"/>
                                                </div>
                                                <div id="iconFill">
                                                    <div id="colorIcon">
                                                        <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='newFill' 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='newFill' 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>
                                        </div>
                                            <form class="hrForm" action="vitals.php" method="post">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <label class="form-label">Add Pulse</label>
                                                        <input class="vital-entry" placeholder="84 bpm" type="text" id="hrInput"/>
                                                        <label for="vital-entry">
                                                            <span class="icon-plus input-icon"></span>
                                                        </label>
                                                            <input type="submit" class="vital-submit">
                                                    </div>
                                                    <div class="controls chr">
                                                        <label class="form-label">Add to CHR</label>
                                                        <input type="checkbox" class="js-switch hrChr" checked/>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

.vitals-graph{
    display:block;
    text-align:center;
}
.hrGraph{
    position:relative;
    display:inline-block;
    width:16em;
    height:16em;
}

#noFill{
    width:100%;
    height:100%;
}

#iconFill{
    margin-top:-100%;
    overflow:hidden;
    width:100%;
    height:0;
}

#colorIcon{
    width:16em;
    height:16em;
}

.newFill{
    fill:#DA1C5C;
    -webkit transition: all 300ms;
    transition: all 300ms;
}

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