Spinnerstiler

Spinnere eller lastere viser seg nyttige når brukeren må vente mens han laster inn en webside. Disse spinnerne hjelper til. Uten disse kan brukeren lukke siden før den laster. Denne bloggen fremhever hvordan spinnere blir opprettet og stylet ved hjelp av Bootstrap 5.

Hvordan lage spinnere ved hjelp av bootstrap 5

Med det formål å opprette en spinner bare tilordne .Spinner-grense klasse til elementene du vil legge til spinneren.

Html

Dette er en spinner

Her setter vi inn en spinner inne i en div container som er ytterligere pakket inn i en annen div -beholder.

Produksjon

En spinner blir også referert til som en laster.

Hvordan lage fargerike spinnere

Du kan style spinnere ved å bruke fargeverktøyklassene som er tilgjengelige i Bootstrap 5. Her har vi brukt alle disse klassene for å lage fargerike spinnere

Html

Ovennevnte kode vil generere totalt 9 spinnere hver med en annen farge.

Produksjon

Slik kan du lage fargerike spinnere.

Hvordan lage voksende spinnere

En annen måte du kan style spinneren din på er ved å gi den en økende effekt i stedet for en spinnende effekt. For å tilordne spinneren din en voksende effekt, bruk .Spinner-Grow klasse.

Html

Som vist i kodebiten ovenfor kan du bruke alle fargeforholdsklassene sammen med .Spinner-Grow-klasse for å lage voksende spinnere.

Produksjon

En økende effekt ble med hell lagt til spinnere.

Hvordan skalere spinnerstørrelse

Med det formål å lage en spinner som er mindre i størrelse enn standardstørrelse, bruk .Spinner-Border-SM klasse eller hvis du vil lage en liten voksende spinner, så bruk .Spinner-Grow-SM.

Html

Kodebiten vil generere begge slags spinnere som spinner og vokser, og har en liten størrelse.

Produksjon

Utgangen viser spinnere som er mindre i størrelse sammenlignet med standardstørrelsen.

Hvordan legge til spinnere til knapper

Vi vil ofte legge til spinnere til knapper i situasjoner når brukeren må vente på at kilden skal lastes etter å ha klikket på knappen. Slik kan du legge til spinnere til knapper.

Html

Vente…

I koden ovenfor legger den første knappen til en liten spinner uten tekst. Spinneren ble opprettet ved å tilordne relevante klasser til elementet. I mellomtiden legger den andre knappen til en liten størrelse voksende knapp med tekst.

Produksjon

Etter tilnærmingene omtalt ovenfor kan du lage, stil og legge spinnere til forskjellige elementer.

Konklusjon

En spinner opprettes ved hjelp av .Spinner-grense Klasse, i mellomtiden for å style spinneren kan du bruke forskjellige tekstfargeklasser som er tilgjengelige som er .tekst-primary, .tekst-info, .tekst-suksess, .tekst-videregående, .tekstmettet, .Tekstlys, .tekst-far, .tekst-mørk, og .tekstvarsling. For å gi spinneren en økende effekt, bruk .Spinner-Grow klasse, dessuten for å lage liten størrelse spinner .Spinner-Border-SM, eller .Spinner-Grow-SM klasser. For å legge til spinnere til knapper spenne dem inne i elementet.