Laster ... Animasjon i Vanilla JavaScript

Introduksjon

Når du utvikler nettsteder og nettapplikasjoner, kan inkludert en lasteanimasjon forbedre brukeropplevelsen betraktelig ved å kommunisere hva som skjer. Dette engasjerer brukere og holder oppmerksomheten deres mens de laster inn innholdet, og det hjelper brukerne å forstå hva som skjer i stedet for å la dem gjette.

I denne veiledningen skal vi se på hvordan du bruker Vanilla JavaScript for å lage en lasteanimasjon. Vi vil jobbe med begge animerte GIFs og CSS-skapte lastere og se hvordan du bruker dem i to scenarier: lasting av innhold ved app-/nettstedstart eller forespørsel om innhold fra en ekstern API.

Hvordan lage en laster

Det er forskjellige måter folk kanskje vil vise lasteren sin på. For formålet med denne veiledningen bygger vi en laster som dekker hele skjermen og deretter forsvinner når siden er ferdig lastet. Først av alt må vi lage en plassholder 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 enkelhets skyld har vi bare to <div> blokker – en for lasteren og en for nettstedets innhold.

Som tidligere nevnt kan lasteikonet være en GIF, et animert ikon laget med CSS, eller noe annet. Det som er viktig å huske er at den samme tilnærmingen gjelder for alle typer lasteikoner vi bruker.

Lag Loader ved hjelp av en GIF

A GIF er et animert ikon som spilles av på ubestemt tid. En gang vi har laget vår GIF, stiler vi loader-container div som skal huse den. Det er mange måter å style den på! Du kan være veldig kreativ her. Vi legger ganske enkelt til et lag med svart bakgrunn på toppen av siden vår ved siden av ikonet, for å "blokkere" innlastingsinnholdet:

.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 laster inn nettsiden vår nå, vil vi se en svart bakgrunn med en GIF laster inn midt på skjermen, på samme måte som dette:

På dette tidspunktet er vi klare til å implementere lasting ved hjelp av JavaScript. Men la oss også se hvordan vi kan bruke CSS-skapt animasjon i stedet for en GIF, som ikke krever en ekstra fil for å importere.

Opprett laster ved hjelp av CSS

Vi lager nøyaktig det samme ikonet med CSS. Husk at vi opprettet en ekstra div (spinner) inne i loader-container div og det er det vi skal bruke for å representere 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); }
}

Koden ovenfor vil hjelpe oss med å lage et CSS-laster-ikon som vi nå kan bruke loader-container-div for å sentrere og legge til den svarte bakgrunnen 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;
}

Nå som vi har sett de to tilgjengelige typene animerte lastere, la oss bruke JavaScript til å kontrollere når denne lasteanimasjonen vises og forsvinner.

Hvordan implementere en lasteanimasjon med JavaScript

JavaScript lar oss manipulere HTML-strukturen vår og fjerne eller skjule loader-container som vises for øyeblikket foran nettstedets innhold. Det er to hovedtilnærminger for å oppnå dette - bare å skjule loader-container, eller fjerne den helt.

Uansett hvilken tilnærming du velger, er det første trinnet å bruke querySelector() or getElementById() for å hente loader-container slik at vi kan manipulere det:

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

For det andre vil vi bruke eventListener å lytte etter en load hendelse, slik at den kaller tilbakeringingsfunksjonen når load hendelsen inntreffer:

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

Skjuler elementet Laster…

Den vanligste tilnærmingen er å skjule loader-container med display: none slik at den forsvinner når innholdet er fullastet.

HTML DOM lar oss endre stilen til HTML-elementene våre fra JavaScript, og koden nedenfor indikerer at vi setter inn lasterens container display eiendom til none slik at det ikke vises en gang load er vellykket:

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

Alternativt kan du opprette en egen klasse som holder display: none eiendom:

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

Og deretter bruke classList.add() for å legge klassen til loader-container element:

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

Fjerner elementet Loading…

Så langt har vi sett en viktig metode som lar oss skjule våre loader-container, noe som antyder at elementet fortsatt er tilstede, men skjult. Et annet alternativ er å fjerne elementet helt:

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

På dette tidspunktet, når vi laster inn siden vår, vil lasteanimasjonen vises til sidens innhold er fullastet.

Implementering av lasteanimasjon når du ber om eksternt innhold fra en API

Henting av innhold fra en ekstern API er en annen situasjon som kan trenge inkludering av en laster. Denne typen innhold kan ta litt tid å hente og vise, så det er best å inkludere en laster.

I vårt tilfelle, la oss prøve å få et tilbud fra en sitater API ved hjelp av den innebygde Fetch API. Legg merke til at HTML-en vi har laget i begynnelsen av denne artikkelen har en "Generer sitat" knapp. Alt vi trenger å gjøre er å bruke document.querxySelector() metode for å hente elementet og lage en tilbakeringingsfunksjon for å håndtere en click hendelse som utløses når brukeren 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 hjelpe oss med å få tilfeldige tilbud i søknaden vår, men vi vil gjerne ha en laster animasjon slik at brukeren vet at vi forventer innhold. For å oppnå dette, vil vi lage to metoder, en for å vise loader-container og den andre for å skjule det:

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

På dette tidspunktet kan vi endelig inkorporere lasteanimasjonen i tilbakeringingsfunksjonen. Når hentingen begynner, vil tilbakeringingsfunksjonen vise lasteanimasjonen og skjule den når dataene er mottatt:

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

konklusjonen

I denne artikkelen har vi lært hvordan du bruker vanilla JavaScript for å lage en lasteanimasjon og vise den på riktig måte. Vi vurderte ulike tilnærminger for å oppnå dette og tok en titt på et par forskjellige brukstilfeller for innlastingsanimasjonen. Vi har valgt å bruke den roterende sirkelen som en laster, men du kan endre den på hvilken som helst måte du måtte ønske – lag gjerne din egen GIF eller CSS animert laster.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://stackabuse.com/loading-animation-in-vanilla-javascript/