Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Skillbar Với Jquery Circle Progress

Tạo Skillbar Với Jquery Circle Progress


Ngày 18 Tháng 10 Năm 2020

Tạo Skillbar Với Jquery Circle Progress

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng skilbar bằng HTML, CSS kết hợp với thư viện Jquery-Circle-Progress cho trang web nhé!

Tạo Cấu Trúc Phần Tử Cho Skillbar

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Bootstrap, Devicon và thư viện Jquery Circle Progress thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Skillbar Bằng Progressbar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
  <script>
 </body>
</html>

Thư viện devicon là một trang chứa đầy đủ icon của các ngôn lập trình mà chúng ta sử dụng hiện nay. Để biết rõ hơn bạn truy cập dường dẫn bên dưới nhé:
Devicon

Thêm Phần Tử HTML Cho Skillbar

Trong phần này chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho skillbar thông qua đoạn mã sau nhé:

HTML

<div id="circleBar">
    <h1>Skill Bar Cho Trang Web</h1>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, numquam nam! Odio, dolore atque! Aliquid suscipit accusantium hic sequi reprehenderit quaerat amet culpa vitae repellendus, nemo dolore laboriosam corrupti ipsa.     </p> 
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="round round1 center-elment" data-value="80" data-size="200" data-thickness="12">
                    <strong></strong>
                    <span><i class="devicon-html5-plain colored"></i> Kỹ Năng HTML5</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="round round2 center-elment" data-value="75" data-size="200" data-thickness="12">
                    <strong></strong>
                    <span><i class="devicon-css3-plain colored"></i>Kỹ Năng CSS3</span>
                </div>
            </div>
            <div class="col-md-3 ">
                <div class="round round3  center-elment" data-value="90" data-size="200" data-thickness="12">
                    <strong></strong>
                    <span><i class="devicon-bootstrap-plain colored" ></i> Kỹ Năng Bootstrap</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="round round4 center-elment" data-value="85" data-size="200" data-thickness="12">
                    <strong></strong>
                    <span><i class="devicon-javascript-plain colored"></i> Kỹ Năng Javascript</span>
                </div>
            </div>
        </div>
    </div>
</div>
Và kết quả bạn xem hình ảnh bên dưới nhé:

Skill bar 1

Điều chỉnh Vị Trí Phần Tử Skillbar Bằng CSS

Trong phần này chúng ta sẽ sử dụng CSS để căn chỉnh phần tử của trang web bằng các thuộc tính CSS cơ bản thông qua đoạn mã sau nhé:

CSS

#circleBar{
    margin-top: 180px;
    text-align: center;
}
#circleBar .round{
    min-height:255px;
    margin-top: 30px;
    position: relative;
    margin-bottom: 20px;
     }
#circleBar .center-elment strong{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    transform: translate(-50%);
    font-size: 40px;
    color: #212121;
    font-weight: 100;
}
#circleBar span {
    display: block;
    color: #999;
    font-size: 18px;
    margin-top: 10px;
}
#circleBar span i {
    font-size: 24px;
    margin-right: 7px;
     }
#circleBar button{
      border-radius: 25px;
     background-color: white;
     padding: 10px 40px 10px 40px;
   }
#circleBar button:hover{
    background-color: #bada55;
    color: #fff;
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

Skill bar 2

Kích Hoạt Thư Viện Jquery Circle Progress

Phần cuối cùng chúng ta sẽ đi vào kích hoạt thư viện Jquery Circle Progress cho từng đối tượng trong trang web thông qua đoạn mã Javascript sau nhé:

Javascript

$('.round1').circleProgress({
    value: 0.8
}).on('circle-animation-progress', function (event, progress) {
    $(this).find('strong').html(Math.round(80 * progress) + '%');
});
$('.round2').circleProgress({
    value: 0.6
}).on('circle-animation-progress', function (event, progress) {
    $(this).find('strong').html(Math.round(75 * progress) + '%');
});
$('.round3').circleProgress({
    value: 0.9
}).on('circle-animation-progress', function (event, progress) {
    $(this).find('strong').html(Math.round(90 * progress) + '%');
});
$('.round4').circleProgress({
    value: 0.85
}).on('circle-animation-progress', function (event, progress) {
    $(this).find('strong').html(Math.round(85 * progress) + '%');
});

Và kết quả cuối cùng bạn xem ở hình ảnh bên dưới nhé:

Skill bar 3

Và đây là đoạn mã của dự án này trên Codepen nhé(Bạn nên chuyển sang chế độ screen 0.5x, 0.25x để thấy rõ hơn nhé):

See the Pen Skillbar cho trang web by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tham khảo thêm về jquery circle progress thì có thể xem đường dẫn bên dưới nhé
jquery circle progress

Nếu bạn muốn tìm hiểu thêm về các skillbar đẹp cho trang web thì có thể tham khảo đường dẫn bên dưới nhé
Skill Bar Cho Trang Web (2020)

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo skillbar hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!