Caricamento in corso... Animazione in JavaScript Vanilla

Introduzione

Durante lo sviluppo di siti Web e applicazioni Web, l'inclusione di un'animazione di caricamento può migliorare notevolmente l'esperienza dell'utente comunicando ciò che sta accadendo. Ciò coinvolge gli utenti e mantiene la loro attenzione durante il caricamento del contenuto e aiuta gli utenti a capire cosa sta succedendo piuttosto che lasciarli indovinare.

In questa guida, vedremo come utilizzare Vanilla JavaScript per creare un'animazione di caricamento. Lavoreremo con entrambi animati GIF e caricatori creati da CSS e scopri come utilizzarli in due scenari: caricamento di contenuto all'avvio di app/sito Web o richiesta di contenuto da un'API esterna.

Come creare un caricatore

Ci sono vari modi in cui le persone potrebbero voler visualizzare il proprio caricatore. Ai fini di questa guida, creeremo un caricatore che coprirà l'intero schermo e poi scomparirà al termine del caricamento della pagina. Prima di tutto, dobbiamo creare una pagina HTML segnaposto:

<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>

Per semplicità ne abbiamo solo due <div> blocchi: uno per il caricatore e uno per il contenuto del sito web.

Come affermato in precedenza, l'icona di caricamento può essere a GIF, un'icona animata creata con CSS o qualcos'altro. La cosa importante da ricordare è che lo stesso approccio si applica a qualsiasi tipo di icona di caricamento che utilizziamo.

Crea caricatore usando una GIF

A GIF è un'icona animata che suona all'infinito. Una volta abbiamo creato il nostro GIF, modelleremo il loader-container div che lo ospiterà. Ci sono molti modi per modellarlo! Puoi diventare davvero creativo qui. Aggiungeremo semplicemente un livello con uno sfondo nero nella parte superiore della nostra pagina accanto all'icona, per "bloccare" il contenuto di caricamento:

.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;
}

Quando carichiamo la nostra pagina web ora, vedremo uno sfondo nero con a GIF caricamento al centro dello schermo, simile a questo:

A questo punto, siamo pronti per implementare il caricamento utilizzando JavaScript. Ma vediamo anche come possiamo usare l'animazione creata dai CSS invece di a GIF, che non richiede un file aggiuntivo da importare.

Crea caricatore usando CSS

Creeremo esattamente la stessa icona con CSS. Ricorda, abbiamo creato un div aggiuntivo (spinner) dentro il loader-container div ed è quello che useremo per rappresentare l'icona:

.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); }
}

Il codice sopra ci aiuterà a creare un'icona del caricatore CSS di cui ora possiamo usare il div del caricatore-container per centrare e aggiungere lo sfondo nero come abbiamo fatto in precedenza:

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

Ora che abbiamo visto i due tipi di caricatori animati disponibili, utilizziamo JavaScript per controllare quando questa animazione di caricamento appare e scompare.

Come implementare un'animazione di caricamento con JavaScript

JavaScript ci consente di manipolare la nostra struttura HTML e rimuovere o nascondere il file loader-container che è attualmente visualizzato di fronte a il contenuto del sito web. Ci sono due approcci principali per raggiungere questo obiettivo: nascondere semplicemente il loader-container, o rimuovendolo del tutto.

Qualunque approccio tu scelga, il primo passo è usare il querySelector() or getElementById() per recuperare il loader-container in modo da poterlo manipolare:

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

In secondo luogo, utilizzeremo il eventListener ascoltare un load evento, in modo che chiami la funzione di callback quando il load l'evento si verifica:

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

Nascondere l'elemento di caricamento...

L'approccio più comune è nascondere il loader-container con display: none in modo che scompaia quando il contenuto è completamente caricato.

HTML DOM ci consente di modificare lo stile dei nostri elementi HTML da JavaScript e il codice seguente indica che stiamo impostando il contenitore del caricatore display proprietà a none in modo che non appaia una volta che il load ha successo:

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

In alternativa, puoi creare una classe separata che tiene display: none proprietà:

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

E poi usare classList.add() per aggiungere la classe a loader-container elemento:

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

Rimozione dell'elemento di caricamento...

Finora, abbiamo visto un metodo importante che ci permette di nascondere il nostro loader-container, il che implica che l'elemento è ancora presente, ma nascosto. Un'altra opzione è rimuovere completamente l'elemento:

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

A questo punto, quando carichiamo la nostra pagina, l'animazione di caricamento verrà visualizzata fino a quando il contenuto della pagina non sarà completamente caricato.

Implementazione dell'animazione di caricamento durante la richiesta di contenuto esterno da un'API

Il recupero del contenuto da un'API esterna è un'altra situazione che potrebbe richiedere l'inclusione di un caricatore. Questo tipo di contenuto può richiedere del tempo per essere recuperato e visualizzato, quindi è meglio includere un caricatore.

Nel nostro caso, proviamo a ottenere una citazione da a citazioni API utilizzando l'API di recupero integrata. Si noti che l'HTML che abbiamo creato all'inizio di questo articolo ha a "Genera preventivo" pulsante. Tutto quello che dobbiamo fare è usare il document.querxySelector() metodo per ottenere l'elemento e creare una funzione di callback per gestire a click evento che viene attivato quando l'utente fa clic sul pulsante:

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; });
});

Questo ci aiuterà con successo a ottenere citazioni casuali nella nostra applicazione, ma vorremmo avere a caricamento dell'animazione in modo che l'utente sappia che ci aspettiamo dei contenuti. Per fare ciò, creeremo due metodi, uno per visualizzare il file loader-container e l'altro per nasconderlo:

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

A questo punto, possiamo finalmente incorporare l'animazione di caricamento nella funzione di callback. Quando il recupero inizia, la funzione di richiamata visualizzerà l'animazione di caricamento e la nasconderà una volta ricevuti i dati:

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; });
});

Conclusione

In questo articolo, abbiamo imparato come utilizzare il JavaScript vanilla per creare un'animazione di caricamento e visualizzarla in modo appropriato. Abbiamo considerato vari approcci per raggiungere questo obiettivo e abbiamo dato un'occhiata a un paio di diversi casi d'uso per il caricamento dell'animazione. Abbiamo scelto di utilizzare il cerchio rotante come caricatore, ma puoi cambiarlo in qualsiasi modo desideri: sentiti libero di crearne uno tuo GIF o caricatore animato CSS.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://stackabuse.com/loading-animation-in-vanilla-javascript/