Jquery Animations on Gauges not working

Question

I am using FlexGuage.js to animate some gauges in my website. The gauges are displaying how I would like them to display under the Resume/Technical Skills section but they are not animating. What am I not doing right. My website is here: http://spenry.mydevryportfolio.com/portfolio/ also here is my link to jsfiddle: http://jsfiddle.net/penrysh/tejfxcru/embedded/result/

HTML Code:

<div id="HTMLCSSGauge" style="width:175px"> 
<script>
var gauge = new FlexGauge({
appendTo: '#HTMLCSSGauge',
dialValue: true, // Set the dial to display arcFillPercent supplied
dialClass: 'gaugeDials',
dialUnit: '%',
animateEasing: true,
dialLabel: 'HTML/CSS',
dialLabelClass: 'gaugeDialsLabel',
arcFillPercent: .80,
arcStrokeFg: 20,
arcStrokeBg: 20,
animateSpeed: 1,
colorArcFg: '#91B0DF',
colorArcBg: '#124085'
});
</script>
</div>

CSS Code:

.gaugeDials {
font-size: 200%;
font-weight: bold;
left: 0;
top: 100px;
width: 100%;
float: left;
margin-left: 10%;
padding-top: 10px;
}

.gaugeDialsLabel {
font-size: 80%;
font-weight: bold;
left: 0;
top: 170px;
width: 100%;
float: left;
margin-left: 6%;
margin-bottom: 5%;

}

#HTMLCSSGauge {
float: left;
margin-left: 60px;
padding: 0;
}