Se încarcă... Animație în JavaScript Vanilla

Introducere

Când dezvoltați site-uri web și aplicații web, inclusiv o animație de încărcare poate îmbunătăți experiența utilizatorului în mod semnificativ, comunicând ceea ce se întâmplă. Acest lucru implică utilizatorii și le păstrează atenția în timp ce încarcă conținutul și îi ajută pe utilizatori să înțeleagă ce se întâmplă, mai degrabă decât să-i lase să ghicească.

În acest ghid, vom analiza cum să folosiți JavaScript Vanilla pentru a crea o animație de încărcare. Vom lucra cu ambele animate GIF-uri și încărcătoare create de CSS și vedeți cum să le utilizați în două scenarii: încărcarea conținutului la lansarea aplicației/site-ului web sau solicitarea de conținut de la un API extern.

Cum se creează un încărcător

Există diferite moduri în care oamenii ar putea dori să-și afișeze încărcătorul. În scopul acestui ghid, vom construi un încărcător care va acoperi întregul ecran și apoi va dispărea când pagina este încărcată. În primul rând, trebuie să creăm o pagină HTML de substituent:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

De dragul simplității, avem doar două <div> blocuri – unul pentru încărcător și unul pentru conținutul site-ului web.

După cum sa menționat anterior, pictograma de încărcare poate fi a GIF, o pictogramă animată creată cu CSS sau altceva. Lucrul important de reținut este că aceeași abordare se aplică oricărui tip de pictogramă de încărcare pe care o folosim.

Creați încărcător folosind un GIF

A GIF este o pictogramă animată care se joacă pe termen nelimitat. O singura data noi ne-am creat GIF, vom stila loader-container div care îl va găzdui. Există numeroase moduri de a-l coafa! Aici poți fi cu adevărat creativ. Pur și simplu vom adăuga un strat cu un fundal negru în partea de sus a paginii noastre alături de pictogramă, pentru a „bloca” conținutul de încărcare:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Când încărcăm pagina noastră web acum, vom vedea un fundal negru cu a GIF se încarcă în mijlocul ecranului, similar cu acesta:

În acest moment, suntem gata să implementăm încărcarea folosind JavaScript. Dar să vedem și cum putem folosi animația creată de CSS în loc de a GIF, care nu necesită un fișier suplimentar pentru a importa.

Creați încărcător folosind CSS

Vom crea exact aceeași pictogramă cu CSS. Amintiți-vă, am creat un div suplimentar (spinner) în interiorul loader-container div și asta este ceea ce vom folosi pentru a reprezenta pictograma:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Codul de mai sus ne va ajuta să creăm o pictogramă de încărcare CSS a cărei acum putem folosi div-ul încărcător-container pentru a centra și adăuga fundalul negru așa cum am făcut anterior:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Acum că am văzut cele două tipuri de încărcătoare animate disponibile, să folosim JavaScript pentru a controla când apare și când dispare această animație de încărcare.

Cum să implementați o animație de încărcare cu JavaScript

JavaScript ne permite să manipulăm structura HTML și să eliminăm sau să ascundem loader-container care este afișat în prezent în fața conținutul site-ului web. Există două abordări majore pentru a realiza acest lucru - doar ascunderea loader-container, sau eliminând-o cu totul.

Indiferent de abordarea pe care o alegeți, primul pas este să utilizați querySelector() or getElementById() pentru a prelua loader-container astfel încât să-l putem manipula:

const loaderContainer = document.querySelector('.loader-container');

În al doilea rând, vom folosi eventListener a asculta pentru a load eveniment, astfel încât apelează funcția de apel invers atunci când load are loc evenimentul:

window.addEventListener('load', () => { // ...
});

Ascunderea elementului de încărcare...

Cea mai comună abordare este ascunderea loader-container cu display: none astfel încât să dispară atunci când conținutul este încărcat complet.

HTML DOM ne permite să schimbăm stilul elementelor noastre HTML din JavaScript, iar codul de mai jos indică faptul că setăm containerul încărctorului display proprietate pentru none astfel încât să nu apară odată ce load este de succes:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Alternativ, puteți crea o clasă separată care să dețină display: none proprietate:

.loader-container-hidden { display: none;
}

Și apoi utilizați classList.add() pentru a adăuga clasa la loader-container element:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Eliminarea elementului de încărcare...

Până acum, am văzut o metodă majoră care ne permite să ne ascundem loader-container, ceea ce implică faptul că elementul este încă prezent, dar ascuns. O altă opțiune este să eliminați complet elementul:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

În acest moment, când încărcăm pagina noastră, animația de încărcare va fi afișată până când conținutul paginii este încărcat complet.

Implementarea animației de încărcare atunci când se solicită conținut extern de la un API

Preluarea conținutului dintr-un API extern este o altă situație care poate necesita includerea unui încărcător. Preluarea și afișarea acestui tip de conținut poate dura ceva timp, așa că cel mai bine este să includeți un încărcător.

În cazul nostru, să încercăm să obținem un citat de la a API-ul citate folosind API-ul Fetch încorporat. Observați că HTML-ul pe care l-am creat la începutul acestui articol are un „Generează cotația” buton. Tot ce trebuie să facem este să folosim document.querxySelector() metodă pentru a obține elementul și a crea o funcție de apel invers pentru a gestiona a click eveniment care este declanșat atunci când utilizatorul face clic pe butonul:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Acest lucru ne va ajuta cu succes să obținem citate aleatorii în aplicația noastră, dar ne-am dori să avem un se încarcă animația astfel încât utilizatorul să știe că așteptăm conținut. Pentru a realiza acest lucru, vom crea două metode, una pentru a afișa loader-container iar celălalt să o ascundă:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

În acest moment, putem în sfârșit încorpora animația de încărcare în funcția de apel invers. Când începe preluarea, funcția de apel invers va afișa animația de încărcare și o va ascunde odată ce datele sunt primite:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Concluzie

În acest articol, am învățat cum să folosim JavaScript vanilla pentru a crea o animație de încărcare și a o afișa în mod corespunzător. Am luat în considerare diferite abordări pentru a realiza acest lucru și am analizat câteva cazuri de utilizare diferite pentru animația de încărcare. Am ales să folosim cercul rotativ ca încărcător, dar îl puteți schimba în orice mod doriți - nu ezitați să vă creați propriul dvs. GIF sau încărcător animat CSS.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Source: https://stackabuse.com/loading-animation-in-vanilla-javascript/