A Pen by Lego Mushroom.

index.html

<!--Unminified version is here: http://goo.gl/sq2gDY-->

<div class="icon"><!--  The MIT License (MIT) Copyright (c) 2013 LegoMushroom--><style>.icon{background-color:#f59995;border-radius:50%;width:7.5em;height:7.5em;position:relative;font-family:monospace;text-align:center;font-size:16px}.icon .svg-icon{width:50%;height:50%;position:absolute;left:50%;top:50%;margin-left:-25%;margin-top:-25%}.icon .text{margin-top:2em;color:#f59995;border-radius:50%;display:inline-block;padding:.25em;font-size:.75em}.svg-icon{stroke:#fff}.svg-icon svg{width:100%;height:100%}.svg-icon svg line,.svg-icon svg path,.svg-icon svg polyline{stroke-width:1px}</style><div class="svg-icon"><svg id="svg" viewBox="0 0 32 32"><path fill="none" stroke-miterlimit="10" d="M4.48,25.449"/><path fill="none" stroke-miterlimit="10" d="M4.462,4.148l0.017,19.301c0,1.1,0.901,2,2.001,2h19.246c1.1,0,2.002-0.9,2.005-2l0.05-19.301"/><line fill="none" stroke-miterlimit="10" x1="27.771" y1="8.6" x2="31.422" y2="8.6"/><line fill="none" stroke-miterlimit="10" x1="4.462" y1="8.6" x2="0.578" y2="8.6"/><g id="cover-boiling"><line fill="none" stroke-miterlimit="10" x1="2.271" y1="3.675" x2="29.908" y2="3.675"/><path fill="none" stroke-miterlimit="10" d="M13.031,3.675c0-1.722,1.396-3.118,3.117-3.118s3.118,1.396,3.118,3.118"/></g><polyline id="fire-boiling" fill="none" stroke-miterlimit="10" points="23,29.808 21.804,27.988 18.985,30.808 16.134,27.988 13.284,30.808 10.404,27.988 9,29.808 "/><rect width="22" height="20" fill="white" x="5.1" y="4.65" id="water-boiling"></rect></svg><div id="text" class="text">0%</div><script type="text/javascript">(function(){window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e,t){window.setTimeout(e,1e3/60)}}();var e=this;window.pan={init:function(){this.fire=this.$("fire-boiling");this.cover=this.$("cover-boiling");this.water=this.$("water-boiling");this.text=this.$("text");this.waterHeight=parseInt(this.water.getAttribute("height"),10)+.75;this.waterY=parseInt(this.water.getAttribute("y"),10);this.waterPercent=this.waterHeight/100;this.fireVariables();return this.animationLoop(null,this)},fireVariables:function(){var e,t;this.top=30.808;this.bottom=27.988;t=this.top-this.bottom;e=6;this.step=t/e;this.currTop=this.bottom;this.currBottom=this.top;this.direction1=false;return this.direction2=false},$:function(e){return document.getElementById(e)},setProgress:function(e){var t;if(e<0||e>100){return}t=this.waterPercent*e;this.water.setAttribute("height",this.waterHeight-t);this.water.setAttribute("y",this.waterY+t);return this.text.innerHTML=""+e+"%"},getRand:function(e,t){return Math.floor(Math.random()*(t+1-e)+e)},animateCover:function(){return this.cover.setAttribute("transform","rotate("+this.getRand(-4,6)+",16,2)")},animateFire:function(){if(!this.direction1){if(this.currTop<=this.top){this.currTop+=this.step}else{this.direction1=true}}else{if(this.currTop>=this.bottom){this.currTop-=this.step}else{this.direction1=false}}if(!this.direction2){if(this.currBottom>=this.bottom){this.currBottom-=this.step}else{this.direction2=true}}else{if(this.currBottom<=this.top){this.currBottom+=this.step}else{this.direction2=false}}return this.fire.setAttribute("points","23,"+(this.top-1)+" \n21.804,"+this.currTop+"\n18.985,"+this.currBottom+"\n16.134,"+this.currTop+"\n13.284,"+this.currBottom+"\n10.404,"+this.currTop+"\n9,"+(this.top-1)+"\n")},animate:function(){this.animateFire();return this.animateCover()},animationLoop:function(e){this.animate();return requestAnimFrame(this.animationLoop.bind(this))}};pan.init()}).call(this) </script></div></div>

script.js

/* Just copy and paste HTML code to your project. You have the {pan} variable in global scope and {setProgress} function to set the current progress. Unminified version http://goo.gl/sq2gDY */

setTimeout(function() {
  var i; i = 0;
  return setInterval(function() {
    /*    Right here   */
    return pan.setProgress(++i);
    
  }, 100);
}, 3000); 

/* 
by LegoMushroom
twitter: @mailtolego
github: https://github.com/sol0mka/boiling
*/

style.css

.icon{
  margin: 0 auto;
  margin-top: 200px;
}

SVG-icon-loader-with-an-API.markdown

SVG icon loader with an API

Just copy and paste HTML code to your project. You have the {pan} variable in global scope and {setProgress} function to set the current progress. Unminified version http://goo.gl/sq2gDY

A Pen by Lego Mushroom on CodePen.

License.