Indlæser... Animation i Vanilla JavaScript

Introduktion

Når du udvikler websteder og webapplikationer, kan herunder en indlæsningsanimation forbedre brugeroplevelsen betydeligt ved at kommunikere, hvad der foregår. Dette engagerer brugerne og fastholder deres opmærksomhed, mens de indlæser indholdet, og det hjælper brugerne med at forstå, hvad der foregår, i stedet for at lade dem gætte.

I denne guide vil vi se på, hvordan du bruger Vanilla JavaScript til at oprette en indlæsningsanimation. Vi vil arbejde med begge animerede GIF og CSS-oprettede indlæsere og se, hvordan du bruger dem i to scenarier: indlæsning af indhold ved app-/website-lancering eller anmodning om indhold fra en ekstern API.

Sådan opretter du en loader

Der er forskellige måder, folk måske ønsker at vise deres læsser på. Til formålet med denne vejledning bygger vi en loader, der dækker hele skærmen og derefter forsvinder, når siden er færdig med at indlæse. Først og fremmest skal vi oprette en pladsholder HTML-side:

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

For nemheds skyld har vi kun to <div> blokke – en til loaderen og en til hjemmesidens indhold.

Som tidligere nævnt kan indlæsningsikonet være en GIF, et animeret ikon oprettet med CSS eller noget andet. Det vigtige at huske er, at den samme tilgang gælder for enhver type indlæsningsikon, vi bruger.

Opret Loader ved hjælp af en GIF

A GIF er et animeret ikon, der afspilles på ubestemt tid. Enkelt gang vi har skabt vores GIF, stiler vi den loader-container div, der skal huse det. Der er mange måder at style det på! Du kan være rigtig kreativ her. Vi tilføjer blot et lag med sort baggrund oven på vores side ved siden af ​​ikonet for at "blokere" indlæsningsindholdet:

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

Når vi indlæser vores webside nu, vil vi se en sort baggrund med en GIF indlæses midt på skærmen, svarende til dette:

På dette tidspunkt er vi klar til at implementere indlæsning ved hjælp af JavaScript. Men lad os også se, hvordan vi kan bruge CSS-skabt animation i stedet for en GIF, som ikke kræver en ekstra fil for at importere.

Opret Loader ved hjælp af CSS

Vi opretter nøjagtig det samme ikon med CSS. Husk, vi oprettede en ekstra div (spinner) inde i loader-container div, og det er det, vi skal bruge til at repræsentere ikonet:

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

Ovenstående kode vil hjælpe os med at skabe et CSS loader-ikon, som vi nu kan bruge loader-container div til at centrere og tilføje den sorte baggrund, som vi gjorde tidligere:

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

Nu hvor vi har set de to tilgængelige typer animerede indlæsere, lad os bruge JavaScript til at kontrollere, hvornår denne indlæsningsanimation vises og forsvinder.

Sådan implementeres en indlæsningsanimation med JavaScript

JavaScript giver os mulighed for at manipulere vores HTML-struktur og fjerne eller skjule loader-container der vises i øjeblikket foran hjemmesidens indhold. Der er to hovedtilgange til at opnå dette – blot at skjule loader-container, eller fjern det helt.

Uanset hvilken tilgang du vælger, er det første skridt at bruge querySelector() or getElementById() at hente loader-container så vi kan manipulere det:

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

For det andet vil vi bruge eventListener at lytte efter en load hændelse, så den kalder tilbagekaldsfunktionen, når den load hændelse opstår:

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

Skjuler elementet Loading…

Den mest almindelige tilgang er at skjule loader-container med display: none så det forsvinder, når indholdet er fuldt indlæst.

HTML DOM giver os mulighed for at ændre stilen på vores HTML-elementer fra JavaScript, og koden nedenfor angiver, at vi indstiller loaderens container display ejendom til none så det ikke vises en gang load er vellykket:

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

Alternativt kan du oprette en separat klasse, som holder display: none ejendom:

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

Og derefter bruge classList.add() at tilføje klassen til loader-container element:

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

Fjerner elementet Loading…

Indtil videre har vi set en stor metode, der giver os mulighed for at skjule vores loader-container, hvilket antyder, at elementet stadig er til stede, men skjult. En anden mulighed er at fjerne elementet helt:

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

På dette tidspunkt, når vi indlæser vores side, vil indlæsningsanimationen blive vist, indtil sidens indhold er fuldt indlæst.

Implementering af indlæsningsanimation ved anmodning om eksternt indhold fra en API

Hentning af indhold fra en ekstern API er en anden situation, der kan kræve medtagelse af en loader. Denne type indhold kan tage noget tid at hente og vise, så det er bedst at inkludere en loader.

I vores tilfælde, lad os prøve at få et tilbud fra en citater API ved hjælp af den indbyggede Fetch API. Bemærk, at den HTML, vi har oprettet i begyndelsen af ​​denne artikel, har en "Generer citat" knap. Alt vi skal gøre er at bruge document.querxySelector() metode til at hente elementet og oprette en tilbagekaldsfunktion til at håndtere en click hændelse, der udløses, når brugeren klikker på knappen:

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

Dette vil med succes hjælpe os med at få tilfældige tilbud ind i vores ansøgning, men vi vil gerne have en indlæser animation så brugeren ved, at vi forventer indhold. For at opnå dette, vil vi oprette to metoder, en til at vise loader-container og den anden for at skjule det:

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

På dette tidspunkt kan vi endelig inkorporere indlæsningsanimationen i tilbagekaldsfunktionen. Når hentningen begynder, vil tilbagekaldsfunktionen vise indlæsningsanimationen og skjule den, når dataene er modtaget:

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

Konklusion

I denne artikel har vi lært, hvordan man bruger vanilla JavaScript til at oprette en indlæsningsanimation og vise den korrekt. Vi overvejede forskellige tilgange til at opnå dette og tog et kig på et par forskellige use-cases til indlæsningsanimationen. Vi har valgt at bruge den roterende cirkel som en læsser, men du kan ændre den på enhver måde, du måtte have lyst til - du er velkommen til at oprette din egen GIF eller CSS animeret loader.

• Coinsmart. Europas bedste Bitcoin og Crypto Exchange.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. FRI ADGANG.
• CryptoHawk. Altcoin radar. Gratis prøveversion.
• Kilde: https://stackabuse.com/loading-animation-in-vanilla-javascript/