Amimated Skill Bar với jQuery và CSS3

Hôm nay mình sẽ chia sẻ cho các bạn một cách tạo hiệu ứng động Skill Bar/ Progress Bar đơn giản với chỉ 2 dòng code jQuery và CSS3. Skill Bar thường được dùng để đo lường mức độ của một đánh giá nào đó. Thường thì các chủ trang web dùng chúng để thu thập mức độ yêu thích của khách viếng thăm trang web của họ với những chủ đề khác nhau.

Xem Demo | Download

HTML

Đầu tiên, chúng ta cần khung chuẩn html cho việc tạo skill bar như sau :

<div class="skillbar clearfix " data-percent="20%">
	<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
	<div class="skillbar-bar" style="background: #e67e22;"></div>
	<div class="skill-bar-percent">20%</div>
</div>  

<div class="skillbar clearfix " data-percent="25%">
	<div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
	<div class="skillbar-bar" style="background: #3498db;"></div>
	<div class="skill-bar-percent">25%</div>
</div>  

<div class="skillbar clearfix " data-percent="50%">
	<div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
	<div class="skillbar-bar" style="background: #2c3e50;"></div>
	<div class="skill-bar-percent">50%</div>
</div>  

<div class="skillbar clearfix " data-percent="40%">
	<div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
	<div class="skillbar-bar" style="background: #5a68a5;"></div>
	<div class="skill-bar-percent">40%</div>
</div>  

<div class="skillbar clearfix " data-percent="75%">
	<div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
	<div class="skillbar-bar" style="background: #525252;"></div>
	<div class="skill-bar-percent">75%</div>
</div>  

<div class="skillbar clearfix " data-percent="100%">
	<div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
	<div class="skillbar-bar" style="background: #2ecc71;"></div>
	<div class="skill-bar-percent">100%</div>
</div>  

<div class="skillbar clearfix " data-percent="70%">
	<div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
	<div class="skillbar-bar" style="background: #4288d0;"></div>
	<div class="skill-bar-percent">70%</div>
</div>  

CSS

Kế tiếp chúng ta sẽ định dạng cho những skill bar với màu sắc (hex) bằng đoạn css sau :

body {
  font-family: 'Ubuntu', sans-serif;
  awidth:960px;
}

p{
  color:#525252;
  font-size:12px;
}

.skillbar {
	position:relative;
	display:block;
	margin-bottom:15px;
	awidth: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:awidth, background-color;
	-moz-transition-property:awidth, background-color;
	-ms-transition-property:awidth, background-color;
	-o-transition-property:awidth, background-color;
	transition-property:awidth, background-color;
}

.skillbar-title {
	position:absolute;
	top:0;
	left:0;
awidth:110px;
	font-weight:bold;
	font-size:13px;
	color:#ffffff;
	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;
	awidth: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:#ffffff;
	color:rgba(0, 0, 0, 0.4);
}

jQuery

Cuối cùng các bạn chỉ việc khai báo thư viện jQuery và copy đoạn code sau :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.skillbar').each(function(){
		jQuery(this).find('.skillbar-bar').animate({
			awidth:jQuery(this).attr('data-percent')
		},6000);
	});
});
</script>

Mình hy vọng với chia sẻ nhỏ trong bài viết này, sẽ giúp các bạn có thêm nhiều kiến thức về CSS3 cũng như jQuery và áp dụng thực tế vào trong chính trang web hay blog của mình.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster