Tạo vòng tròn loading pha màu với HTML và CSS

DEMO

FULL Khóa học trên Edumall, Unica chỉ với 490k, bạn nào cần mua thì liên hệ qua facebook mình nhé

Các dạng loading hiện nay rất phong phú và đa dạng, giúp cho Trang web của bạn trở nên đẹp mắt và dễ nhìn. Trong bài viết này, freetuts sẽ giới thiệu cách tạo một vòng tròn loading pha màu với hiệu ứng đẹp chỉ dùng HTML và CSS. Sau bài viết này chúng ta học được cách tạo ra vòng tròn loading như hình.

Tạo hình tròng loading cực đẹp với HTML và CSS

1/ Phần HTML

Trước tiên, ta phải có 1 bố cục hợp lí để hình tròn loading có thể hoạt động ổn định. Địa hình của nó được sắp xếp vị trí thông qua HTML.

<!DOCTYPE html>
<html>
    <head>
        <title>Tạo hình tròn loading với HTML và CSS</title>
    </head>
    <body>
        <div class="con">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
</html>

2/ Phần CSS

Tiếp theo sẽ là phần tạo hiệu ứng và trang trí lại các thành phần với các thuộc tính của CSS.

body {
}
.con{
    position:absolute;
    display:flex;
    align-elements:center;
    justify-content:center;
    margin:auto;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    animation:animate 4s linear infinite;
}

span{
    animation:anime 2s linear infinite;
    border:2px solid transparent;
    border-top:2px solid blue;
    border-radius:50%;
    position:absolute;
}
span:nth-child(1){
    width:20px;
    height:20px;
    animation-duration:0.5s;
}
/*+2*/
span:nth-child(2){
    width:30px;
    height:30px;
    animation-duration:0.7s;
    top:-5px;
}
/*+3*/
span:nth-child(3){
    width:40px;
    height:40px;
    animation-duration:1s;
    top:-10px;
}
/*+4*/
span:nth-child(4){
    width:50px;
    height:50px;
    animation-duration:1.4s;
    top:-15px;
}
/*+5*/
span:nth-child(5){
    width:60px;
    height:60px;
    animation-duration:1.75s;
    top:-20px;
}
span:nth-child(6){
    width:70px;
    height:70px;
    animation-duration:2.35s;
    top:-25px;
}
span:nth-child(7){
    width:80px;
    height:80px;
    animation-duration:3.55s;
    top:-30px;
}
@keyframes anime{
    100%{transform:rotate(360deg);}
}
@keyframes animate{
    100%{filter:hue-rotate(360deg);}
}

Mình sẽ giải thích sơ lược như sau:

Bước 1: Tạo thiết lập thuộc tính cho thẻ con

.con{
    position:absolute; //nhiệm vụ vị trí tuyệt đối
    display:flex; //theo đường uốn cong
    align-elements:center; //căn chỉnh nằm ở giữa
    justify-content:center; //hình nằm trung tâm
    margin:auto; //căn lề tự động
    top:50%; //trên 50%
    left:50%; //trái 50%
    transform:translate(-50%,-50%);
    animation:animate 4s linear infinite;
}

Bước 2: Tạo các vòng và tùy chỉnh màu tự động cho mỗi vòng, tức là mỗi thẻ span.

span{
    animation:anime 2s linear infinite;
    border:2px solid transparent;
    border-top:2px solid blue;
    border-radius:50%;
    position:absolute;
}
span:nth-child(1){
    width:20px;
    height:20px;
    animation-duration:0.5s;
}
/*+2*/
span:nth-child(2){
    width:30px;
    height:30px;
    animation-duration:0.7s;
    top:-5px;
}
/*+3*/
span:nth-child(3){
    width:40px;
    height:40px;
    animation-duration:1s;
    top:-10px;
}
/*+4*/
span:nth-child(4){
    width:50px;
    height:50px;
    animation-duration:1.4s;
    top:-15px;
}
/*+5*/
span:nth-child(5){
    width:60px;
    height:60px;
    animation-duration:1.75s;
    top:-20px;
}
span:nth-child(6){
    width:70px;
    height:70px;
    animation-duration:2.35s;
    top:-25px;
}
span:nth-child(7){
    width:80px;
    height:80px;
    animation-duration:3.55s;
    top:-30px;
}

Trong phần này :

  • animation-duration:0.1s;: là thời gian chạy của các vòng, bạn có tùy chỉnh theo ý bạn.
  • width: độ rộng (thưa) giữa các vòng tròn.
  • height: độ cao của vòng
  • top: -5px;: hàng đầu của vòng

Bước 3: Tạo keyframe anime cho vòng

Phần này bạn chẳng cần chú trọng gì đến nó.

@keyframes anime{
    100%{transform:rotate(360deg);}
}
@keyframes animate{
    100%{filter:hue-rotate(360deg);}
}

3/ Lời kết

Qua bài viết này, các bạn đã có thể tự tạo cho mình một thanh loading pha màu hình tròn chỉ dùng HTML và CSS. Freetuts hy vọng nó sẽ giúp ích cho trang web của các bạn. Các bạn có thể tùy chỉnh cho thanh loading của mình trở nên bắt mắt hơn với sự phối trộn màu sắc cũng như sử dụng ảnh nền background.

Trong bài viết tiếp theo, freetuts sẽ hướng dẫn việc tạo thanh loading tròn với rất nhiều hiệu ứng.

Hẹn gặp lại trong bài viết tiếp theo.

Khóa học nên xem

Nguồn: freetuts.net