Horizontal Bar

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

<?php
echo 'Hello, world!';

<div id="skillbar_straight" style="padding:10px 0;">
    <div class="skillbar clearfix" data-percent="90%" style="background: #eeeeee;">
				<div class="skillbar-title" style="background: #f7a53b !important;"><span>CSS3</span></div>
				<div class="skillbar-bar" style="background: #ff9000;"></div>
				<div class="skill-bar-percent">90%</div>
			</div>
    <div class="skillbar clearfix" data-percent="55%" style="background: #eeeeee;">
				<div class="skillbar-title" style="background: #39bcdf !important;"><span>WordPress</span></div>
				<div class="skillbar-bar" style="background: #6adcfa;"></div>
				<div class="skill-bar-percent">55%</div>
			</div>
    <div class="skillbar clearfix" data-percent="85%" style="background: #eeeeee;">
				<div class="skillbar-title" style="background: #ff2727 !important;"><span>PHP</span></div>
				<div class="skillbar-bar" style="background: #fa6e6e;"></div>
				<div class="skill-bar-percent">85%</div>
			</div>
    <div class="skillbar clearfix" data-percent="100%" style="background: #eeeeee;">
				<div class="skillbar-title" style="background: #0d5aa6 !important;"><span>jQuery</span></div>
				<div class="skillbar-bar" style="background: #336699;"></div>
				<div class="skill-bar-percent">100%</div>
			</div>

<div style="clear:both;"></div>
</div>
<div style="clear:both; height:10px; overflow:hidden;"></div>
<style type="text/css">.skillbar-title{font-size:12px;color:#000;}.skill-bar-percent{font-size:11px;color:#336699;}</style><script>
				function sbar(){
					jQuery(".skillbar").each(function(){
						jQuery(this).find(".skillbar-bar").animate({
							width:jQuery(this).attr("data-percent")
						},3000);
					});	
				}
				if ( jQuery("#skillbar_straight").next().is(":appeared") ){
					sbar();
				} else {
					jQuery( window ).scroll(function() {
						if ( jQuery("#skillbar_straight").next().is(":appeared") ){
							sbar();
						}
					});
				}
				</script>

[skillwrapper type="bar" bar_titlefontsize="12" bar_titlecolor="#000" bar_percentfontszie="11" bar_percentcolor="#336699"]

[skill title_background="#f7a53b" bar_foreground="#ff9000" bar_background="#eeeeee" percent="90" title="CSS3"]

[skill title_background="#39bcdf" bar_foreground="#6adcfa" bar_background="#eeeeee" percent="55" title="WordPress"]

[skill title_background="#ff2727" bar_foreground="#fa6e6e" bar_background="#eeeeee" percent="85" title="PHP"]

[skill title_background="#0d5aa6" bar_foreground="#336699" bar_background="#eeeeee" percent="100" title="jQuery"]

[/skillwrapper]

CSS3

90%

WordPress

55%

PHP

85%

jQuery

100%