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.
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> <!-- End Skill Bar -->
<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> <!-- End Skill Bar -->
<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> <!-- End Skill Bar -->
<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> <!-- End Skill Bar -->
<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> <!-- End Skill Bar -->
<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> <!-- End Skill Bar -->
<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> <!-- End Skill Bar -->
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;
width:960px;
}
p{
color:#525252;
font-size:12px;
}
.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;
width: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;
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:#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({
width: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.