Skill bar

by ASHISH ROX

HTML

<script src="http://tympanus.net/Tutorials/AnimatedSkillsDiagram/js/jquery.js"></script>
<script src="http://tympanus.net/Tutorials/AnimatedSkillsDiagram/js/raphael.js"></script>
<script src="http://fonts.googleapis.com/css?family=Cabin+Sketch:bold"></script>
<div id="diagram"></div>
<div class="get">
	<div class="arc">
		<span class="text">jQuery</span>
		<input type="hidden" class="percent" value="95" />
		<input type="hidden" class="color" value="#97BE0D" />
	</div>
	<div class="arc">

		<span class="text">CSS3</span>
		<input type="hidden" class="percent" value="90" />
		<input type="hidden" class="color" value="#D84F5F" />
	</div>
	<div class="arc">
		<span class="text">HTML5</span>
		<input type="hidden" class="percent" value="80" />
		<input type="hidden" class="color" value="#88B8E6" />

	</div>
	<div class="arc">
		<span class="text">PHP</span>
		<input type="hidden" class="percent" value="53" />
		<input type="hidden" class="color" value="#BEDBE9" />
	</div>
	<div class="arc">
		<span class="text">MySQL</span>
		<input type="hidden" class="percent" value="45" />
		<input type="hidden" class="color" value="#EDEBEE" />
	</div>
</div>

CSS

@import url("reset.css");

/* ------ layout
-----------------------------------------------*/

html, body {
margin:0;
padding:0;
}

body {
background:#f5f5f5;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
line-height:18px;
}

#content {
position:absolute;
top:50%;
left:50%;
margin:-340px 0 0 -450px;
width:900px;
height:600px;
}

.legend {
float:left;
width:250px;
margin-top:140px;
}

#content h1 {
font-family:'Cabin Sketch', arial, serif;
text-shadow:3px 3px 0 #ddd;
color:#193340;
font-size:40px;
margin-bottom:40px;
text-align:right;
}

.skills {
float:left;
clear:both;
width:100%;
}

.skills ul,
.skills li {
display:block;
list-style:none;
margin:0;
padding:0;
}

.skills li {
float:right;
clear:both;
padding:0 15px;
height:35px;
line-height:35px;
color:#fff;
margin-bottom:1px;
font-size:18px;
}

.skills .jq {
background:#97BE0D;
}

.skills .css {
background:#D84F5F;
}

.skills .html {
background:#88B8E6;
}

.skills .php {
background:#BEDBE9;
}

.skills .sql {
background:#EDEBEE;
}

.footer {
position:fixed;
bottom:0;
left:0;
width:100%;
background:#2D2D2D;
color:#EAEAEA;
padding:20px 0;
}

.footer a {
color:#EAEAEA;
}

.footer a:hover {
color:#E4842C;
}

.footer .inside {
font-family: 'Cabin Sketch', arial, serif;
font-size:22px;
text-align:center;
}


#diagram {
float:right;
width:600px;
height:600px;
}

.get {
display:none;
}


/* ------ anchors
-----------------------------------------------*/

a {
text-decoration:none;
color:#333;
}

JavaScript

var o = {
	init: function(){
		this.diagram();
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73,
			defaultText = 'Skills',
			speed = 250;
		
		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });
		
		var title = r.text(300, 300, defaultText).attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();
		
		r.customAttributes.arc = function(value, color, rad){
			var v = 3.6*value,
				alpha = v == 360 ? 359.99 : v,
				random = o.random(91, 240),
				a = (random-alpha) * Math.PI/180,
				b = random * Math.PI/180,
				sx = 300 + rad * Math.cos(b),
				sy = 300 - rad * Math.sin(b),
				x = 300 + rad * Math.cos(a),
				y = 300 - rad * Math.sin(a),
				path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
			return { path: path, stroke: color }
		}
		
		$('.get').find('.arc').each(function(i){
			var t = $(this), 
				color = t.find('.color').val(),
				value = t.find('.percent').val(),
				text = t.find('.text').text();
			
			rad += 30;	
			var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });
			
			z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
			this.toFront();

				title.stop().animate({ opacity: 0 }, speed, '>', function(){
					this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, speed, '<');
				});
            }).mouseout(function(){
				this.stop().animate({ 'stroke-width': 26, opacity: 1 }, speed*4, 'elastic');
				title.stop().animate({ opacity: 0 }, speed, '>', function(){
					title.attr({ text: defaultText }).animate({ opacity: 1 }, speed, '<');
				});	
            });
		});
		
	}
}
$(function(){ o.init(); });