Hvordan lage en laster ved hjelp av CSS

Når du bruker en applikasjon, kan det hende du må vente med å se innholdet til det blir lastet. For dette lar lasterne på nettsteder eller applikasjoner brukeren vente mens han viser noen animasjon. På et nettsted indikerer disse lasterne at systemet ikke har krasjet, og innholdet vil vises etter en stund. Dessuten gir de animerte lasterne et attraktivt utseende som hjelper med å holde brukerens oppmerksomhet på nettstedet.

Denne artikkelen vil gi instruksjoner relatert til å lage en laster ved hjelp av CSS.

Hvordan lage laster ved hjelp av CSS?

For å lage en laster, for det første, i HTML, legg til et DIV -element med klassenavnet “laster”. Inne i dette elementet, plasser et annet divelement med klassenavnet “Loader-inner”.

Html

Gå nå videre til CSS -delen, der disse elementene vil bli stylet for å lage en laster.

CSS

Stylingen som vi skal bruke er nevnt nedenfor.

Stil alle elementer

*
Margin: 0;
polstring: 0;
Bokstørrelse: Border-Box;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Forklaringen på den ovennevnte koden er listet opp nedenfor:

• “*”Stjerne -symbol brukes til å representere alle slags elementer som disse egenskapene vil bli brukt.
• “margin”Eiendom brukes til å gi plass rundt et element. Verdien "0”Betyr at det ikke ville være noen margin rundt hvert HTML -element.
• “polstring”Eiendom spesifiserer plassen rundt elementets innhold.
• “Bokstørrelse”Eiendom med verdien”grenseboks”Angi at grensen og polstringen er inkludert i høyden og bredden.
• “Font-familie”Definerer elementets skrift.

Stil "kropp" -element

kropp
Høyde: 100VH;
bakgrunnsfarge: RGB (53, 53, 53);

Egenskapene som brukes på kroppselementet er gitt nedenfor:

• “høyde”Eiendom brukes til å sette høyden på kroppen. Enheten "vh”Representerer at kroppselementet til å begynne med tar 100% av visningshøyden.
• “bakgrunnsfarge”Eiendom setter bakgrunnsfargen på kroppen.

Stil “laster” div

.laster
Posisjon: Absolutt;
Topp: 50%;
Venstre: 50%;
Animasjon: Loading-Spinner 400ms lineær uendelig;

Beskrivelsen av egenskaper brukt på lasterdiven til HTML er gitt nedenfor:

• “posisjon”Eiendom med verdien”Absolutt”Vil plassere lasterelementet i forhold til foreldrene.
• “topp”Eiendom setter divens vertikale plassering.
• “venstre”Eiendom setter divens horisontale plassering.
• “animasjon”Er en korthåndsegenskap som setter animasjonsnavnet, animasjonsvarighet, animasjonstimingfunksjon og animasjonsforsinkelse for lasteren.

Merk: “Loading-Spinner”Er animasjonsnavnet, som vil bli brukt i animasjonen @KeyFrames for å spesifisere animasjon.

Stil “Loader-Inner” Div

.laster .Loader-Inner
Bredde: 60px;
Høyde: 60px;
Grense: 10px fast gjennomsiktig;
Border-toppfarge: #00C8B1;
grense-venstre-farge: #00c8b1;
Border-Radius: 50%;

Barnet Div of Loader Div, med navnet “Loader-inner”Brukes med egenskaper som er beskrevet nedenfor:

• “bredde”Eiendom setter elementets bredde.
• “høyde”Eiendom setter elementets høyde.
• “grense”Angir en grense med bredde, type linje og farge.
• “grensen-top-farge”Legger farge til toppen av grensen.
• “grense-venstrefarge”Legger farge til venstre for grensen.
• “Border-Radius”Angir grensens radius og gjør den rundt.

Lasteren er opprettet, og den vil se slik ut:

La oss sette animasjonsnøkkelrammer til ovennevnte laster.

Angi animasjonskeyframes

@KeyFrames Loading-Spinner
0%
Transform: roter (0deg);

100%
Transform: roter (360deg);

Keyframes i CSS definerer animasjonen ved å sette sin stil i forskjellig varighet:

• “@KeyFrames Loading-Spinner”: Animasjonsnavnet”Loading-Spinner”Etterfulgt av nøkkelordet @KeyFrames brukes til å stille animasjonen.
• “0%”Representerer animasjonen i starten av at lasteren skal roteres”0”Grad.
• “100%”Representerer animasjonen på slutten mens du roterer lasteren på“360”Grader.

Merk: Animasjonsnavnet er spesifisert i Loader-Inner Div.

Produksjon

Kul! Vi har laget en animert laster med CSS.

Konklusjon

På nettsteder er lastere som er lagt til for å oppnå oppmerksomheten til brukeren til innholdet får laster. Det er flere CSS -egenskaper som brukes til å lage lastere, for eksempel "animasjon”Og sette animasjonsnøkkelrammer ved å bruke“forvandle”Eiendom. Denne oppskrivningen handlet om å lage en CSS-laster og bruke animasjon på den.