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