Today I am going to tell you how to create simple animated Skill Bar / Progress Bar in two lines of jQuery code.

The skill bar  gives you an opportunity to show visitors to your site how qualified you and your teams are. Add a skill title, percentage of proficiency, and a color (hex value). It’s a quick and colorful way to showcase your knowledge about you and your team.

Skill Bar with jQuery & CSS3

Skill Bar with jQuery & CSS3

jQuery Code

	jQuery('.skillbar').each(function(){
		jQuery(this).find('.skillbar-bar').animate({
			width:jQuery(this).attr('data-percent')
		},6000);
	});

CSS3 Code

.skillbar {
	position:relative;
	display:block;
	margin-bottom:15px;
	width:100%;
	background:#eee;
	height:35px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:0.4s linear;
	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;
	-o-transition:0.4s linear;
	transition:0.4s linear;
	-webkit-transition-property:width, background-color;
	-moz-transition-property:width, background-color;
	-ms-transition-property:width, background-color;
	-o-transition-property:width, background-color;
	transition-property:width, background-color;
}

.skillbar-title {
	position:absolute;
	top:0;
	left:0;
	font-weight:bold;
	font-size:13px;
	color:#fff;
	background:#6adcfa;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-title span {
	display:block;
	background:rgba(0, 0, 0, 0.1);
	padding:0 20px;
	height:35px;
	line-height:35px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-bar {
	height:35px;
	width:0px;
	background:#6adcfa;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.skill-bar-percent {
	position:absolute;
	right:10px;
	top:0;
	font-size:11px;
	height:35px;
	line-height:35px;
	color:#444;
	color:rgba(0, 0, 0, 0.4);
}

HTML Code

<div class="skillbar clearfix " data-percent="65%">
	<div class="skillbar-title" style="background: #88cd2a;"><span>HTML5</span></div>
	<div class="skillbar-bar" style="background: #88cd2a;"></div>
	<div class="skill-bar-percent">65%</div>
</div>

View Live Demo

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/06/jQuery-Skill-Bar.pnghttp://w3lessons.info/wp-content/uploads/2013/06/jQuery-Skill-Bar-150x150.pngKarthikeyan KCSS3FreebiesjqueryCSS3,Jquery
Today I am going to tell you how to create simple animated Skill Bar / Progress Bar in two lines of jQuery code.The skill bar  gives you an opportunity to show visitors to your site how qualified you and your teams are. Add a skill title, percentage of proficiency,...