Gage Bar

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

<style type="text/css">#gage_chart_1 #g1_1, #gage_chart_1 #g2_1, #gage_chart_1 #g3_1{ width:200px; height:160px; display:inline-block; margin:0.5em; }
				#gage_chart_1{ text-align:left; }</style><script>var g1_1, g2_1, g3_1;
function gager_1(){var g1_1 = new JustGage({
					id: "g1_1",
					value: 75,
					title: "WordPress",
					valueFontColor: "#f00",
					levelColors: ["#f00"],
					titleFontColor: "#f00",
					labelFontColor: "#f00",
					gaugeColor: "#eee",
					min: 0,
					max: 100,
					label: "%",
					levelColorsGradient: false,
					showMinMax: "hide",
					shadowOpacity: "0.2",
					shadowSize: "5",
					startAnimationType: "easein"
				});
var g2_1 = new JustGage({
					id: "g2_1",
					value: 25,
					title: "SEO",
					valueFontColor: "#f60",
					levelColors: ["#f60"],
					titleFontColor: "#f60",
					labelFontColor: "#f60",
					gaugeColor: "#eee",
					min: 0,
					max: 100,
					label: "%",
					levelColorsGradient: false,
					showMinMax: "hide",
					shadowOpacity: "0.2",
					shadowSize: "5",
					startAnimationType: "easein"
				});
var g3_1 = new JustGage({
					id: "g3_1",
					value: 50,
					title: "PHP",
					valueFontColor: "#900",
					levelColors: ["#900"],
					titleFontColor: "#900",
					labelFontColor: "#900",
					gaugeColor: "#eee",
					min: 0,
					max: 100,
					label: "%",
					levelColorsGradient: false,
					showMinMax: "hide",
					shadowOpacity: "0.2",
					shadowSize: "5",
					startAnimationType: "easein"
				});
};
jQuery(document).ready(function(){
				if ( jQuery("#gage_chart_1").next().is(":appeared") ){
					if ( ! jQuery("#gage_chart_1").hasClass("gc_active") ) {
						gager_1();
						jQuery("#gage_chart_1").addClass("gc_active");
					}
				} else {
					jQuery(window).scroll(function(){
						if ( jQuery("#gage_chart_1").next().is(":appeared") ){
							if ( ! jQuery("#gage_chart_1").hasClass("gc_active") ) {
								gager_1();
								jQuery("#gage_chart_1").addClass("gc_active");
							}
						}
					});
				}
			});</script><div id="gage_chart_1"><div id="g1_1"></div><div id="g2_1"></div><div id="g3_1"></div></div><div style="clear:both; height:10px; overflow:hidden;"></div>

[skillwrapper type="gage" align="left"]

[skill percent="75" title="WordPress" bar_foreground="#f00" bar_background="#eee"]

[skill percent="25" title="SEO" bar_foreground="#f60" bar_background="#eee"]

[skill percent="50" title="PHP" bar_foreground="#900" bar_background="#eee"]

[/skillwrapper]