Effect animation loading using HTML CSS and Javascript

Hiệu ứng loading sử dụng HTML CSS và Javascript

Loading trong website là hiệu ứng xuất hiện nhằm báo hiệu một hoạt động đang được trì hoãn hoặc đang được tiến hành và chưa hoàn thành.

Có rất nhiều loại loading như:

Loading khi đang tiến hành tải trang khi truy cập vào một trang web.
Loading báo hiệu hành vi click đang được sử lí.

Và kèm theo đó thì kiểu dán loading củng rất đa dạng:

Loading với hiệu ứng gif lặp lại.
Loading với hiệu ứng biểu đồ.
Loading với hiệu ứng thông số phần trăm đang tiến hành.

Vậy hôm nay hãy cùng Lùn Dev đi xây dựng một hiệu ứng animation loading cho website sử dụng HTML CSS và Javascript nhé.

Hình minh họa kết quả

Mô tả code

Opacity cho Hex color

Nhằm sử dụng màu xắc một cách hiệu quả và mịn màng không chói mắt hơn. Trong bài tập này có sử dụng 1 kiểu code kết hợp bảng màu Hex color với opacity. Bạn có thể tham khảo nó tại đây.

Biến trong CSS

Bài tập sử dụng sức mạnh của biến trong CSS nhằm làm đơn giản hóa vấn đề bằng cách khai báo một biến của element mẹ và sau đó để các element con kế thừa bằng việc sử dụng var.

Khai báo biến ở element mẹ

  #loading{
    --loading-value: 0%;
}

Element con kế thừa

  #loading::after{
    background-image: conic-gradient(
        #CCF2F4, #72F4F2 var(--loading-value), 
        transparent var(--loading-value)
    );
}

Để có thể sử dụng Javascript thay đổi giá trị của một biến được khai báo trong class sử dụng setProperty.

Cách dùng như sau:

   element.style.setProperty("Tên biến", Giá trị thay đổi);

Video hướng dẩn chi tiết

Truy cập youtube Lùn Dev để xem nhiều hơn

Source code

Code HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="title">
        <h1>Download code</h1>
        <h3>lundevweb.com</h3>
    </div>
    <div id="loading">
        <div id="value-show">START</div>
    </div>
    

    <script src="script.js"></script>
</body>
</html>

Code CSS

  body{
    height:100vh;
    overflow: hidden;
    font-family: monospace;
    background-image: linear-gradient(to top right, #212477, #492C66);
}
.title{
    text-align: center;
    color:#eee;
    padding:100px 50px 50px;
}
.title h3{
    opacity: .5;
}
#loading{
    --loading-value: 0%;
}
#loading::after{
    background-image: conic-gradient(
        #CCF2F4, #72F4F2 var(--loading-value), 
        transparent var(--loading-value)
    );
}
#loading::before{
    position: absolute;
    top:-80px;
    left:-80px;
    width:calc(100% + 160px);
    height:calc(100% + 160px);
    content:'';
    border-radius: 50%;
    background-image: conic-gradient(
        #C77CA3, #ff3def var(--loading-value), 
        transparent var(--loading-value)
    );
    z-index: 1;
    opacity: .5;
    filter: blur(60px);
}
#value-show{
    position: absolute;
    top:40px;
    left:40px;
    width:calc(100% - 80px);
    height:calc(100% - 80px);
    border-radius: 50%;
    background-image: radial-gradient(#9679B6, #845b97);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color:#D6F2F3;
}

Code Javascript

  let count = 0;
let loading = document.getElementById('loading');
let valueShow = document.getElementById('value-show');

loading.onclick = function(){
    if(count != 0){
        return;
    }
    count = 0;
    startLoading();
}
function startLoading(){
    if(count == 100){
        valueShow.innerHTML = "Finish";
        count = 0;
        return;
    }else{
        count = count + 1;
        valueShow.innerHTML = count + '%';
        loading.style.setProperty("--loading-value", count + '%');

        setTimeout(startLoading, 50);
    }
}