Amimated Skill Bar với jQuery và CSS3

 Xem demo  Download demo

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.

css3, jQuery, progress bar, skill bar,Amimated

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.

 

 HỖ TRỢ TRỰC TUYẾN