Chức năng load trong trong Javascript

Khái niệm

Chức năng load trong trong Javascript được xinh ra nhằm mục đích tạo ra hiệu ứng chờ trong lúc trang web đang được tải nhằm che đi nội dung trước khi hoàn tất.

Sở dĩ phải làm điều này đó là vì khi người dùng truy cập vào website sẽ có rất nhiều dử liệu cần phải tải bao gồm: font chữ, Html, Css, Javascript, hình ảnh, video, nội dung văn bản,... và rất nhiều các tài nguyên khác nên sẽ tốn một khoảng thời gian nhất định trước khi những tài nguyên này được tải hoàn tất. Trong thời gian đó trang web của chúng ta sẽ bị bể vì chưa tải đủ tài nguyên.

Khi sử dụng chức năng load, chúng ta sẽ ngăn người dùng nhìn thấy hình dạng này củng như ngăn người dùng thao tác khi ta chưa tải đủ các tài nguyên sử lí thao tác.

Design animation loaded dùng trong chức năng load javascript

HTML

Ở HTML mình sẽ tạo ra một element có id là load được sử dụng để tạo ra hiệu ứng animation load cho chức năng loaded này.

CSS

Bên CSS mình tiến hành design cho loaded đồng thời bên trong loaded mình tạo ra một class item và design cho nó, sau đó tiến hành tạo ra một animation cho các item nằm bên trong loaded.


  #load {
    width: 100%;
    height: 100vh;
    background-color: #20173E;
    position: fixed;
    top: 0;
    left: 0;
}
#load::before {
    position: absolute;
    width: 300px;
    height: 300px;
    content: '';
    background-image: linear-gradient(
        to bottom right,
        #B914D4, #D7B868
    );
    border-radius: 50%;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    filter: blur(120px);
    opacity: 0.8;
}
#load .item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    --i: 0s;
    opacity: 0;
    animation: animationLoad 3s var(--i) linear infinite;
}

#load .item::before {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #25E2BC;
    content: '';
    border-radius: 50%;
}
@keyframes animationLoad {
    0%{
        transform: rotate(0) scale(3);
        opacity: 0;
        filter: blur(3px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform:  rotate(360deg) scale(0.5);
        filter: blur(0);
    }
}

Javascript

Để có thể thao tác với element load bên HTML ta sẽ gọi lại nó với getElementById.

let load = document.getElementById('load');

Ở đây mình muốn tạo ra hai mươi item bên trong load.

let countDot = 20;

Tiến hành chạy vòng lặp, trong mỗi vòng liên tục tạo ra những item mới và với mỗi item sẽ tạo khai báo một biến i với mục đích làm animation-delay cho từng item với quy tắc mỗi item sau sẽ có animation-delay chậm hơn item trước 0.2 giây. Sau đó dán nó vào trong element load đã khai báo trước đó.

for(let i = 0; i < countDot; i++){
    let newElement = document.createElement('div');
    newElement.classList.add('item');
    newElement.style.setProperty('--i', (0.2 * i) + 's');
    load.appendChild(newElement);
}