Progress Bar -styling i Bootstrap 5

Betydningen av en fremdriftslinje kan vektlegges ved at den holder brukeren din engasjert og informeres om fremdriften i en prosess som når du fyller ut en lang form som har flere trinn eller når du laster en side eller en annen kilde. Her i denne bloggen har vi oppsummert for deg måter du kan style fremdriftsstenger ved hjelp av Bootstrap 5. Men før vi hopper til stylingen, la oss lære å lage en.

Hvordan lage en fremdriftslinje

Med det formål å generere en fremdriftslinje, angi du .framgang klasse for forgjengerelementet i mellomtiden, gi .Progress-Bar til etterfølgerelementet, mens bredden på fremdriftslinjen er justert ved hjelp av breddeegenskapen.

Html

Foreldre div ble gitt .fremgangsklasse, mens barnet div fikk .Progress-Bar-klasse. Til slutt, ved å bruke breddeegenskapen, ble bredden på fremdriftslinjen satt til 50%.

Produksjon

En fremdriftslinje ble generert med suksess.

La oss nå lære forskjellige måter du kan style på en fremdriftslinje.

Hvordan skalere en fremdriftslinje

Som standard har en fremdriftslinje en 16px eller 1REM -høyde, men avhengig av din preferanse kan du skalere høyden på fremdriftslinjen opp og ned. For dette formålet sett samme høyde for forgjengeren Div og etterfølgeren Div.

Html

Ovennevnte kode vil generere to fremdriftsstenger, en med 20px høyde og den andre med 40px høyde. Merk at fremdriftsbeholderen, og fremdriftslinjen ble tildelt samme høyde i begge tilfellene.

Produksjon

Produksjonen viser to fremdriftslinjer med forskjellige høyder.

Hvordan merke en fremdriftslinje

Siden vi vet at en fremdriftslinje viser fremdriften i en prosess, kan du bare skrive en tekst i Child Div, hvis du vil vise denne fremgangen i antall eller prosentandel.

Html

50%

Fremdriftslinjen som opprettes i koden ovenfor har en etikett som sier “50%”. Denne etiketten tilsvarer fremdriften i prosessen.

Produksjon

En etikett ble vellykket tildelt fremdriftslinjen.

Hvordan fargelegge en fremdriftslinje

Hvis du ønsker å gi farger til en fremdriftslinje, bare tilordne bakgrunnsfargeklasser til Progress Bar Container. Bakgrunnsfargeklassene er .BG-Primary, .BG-suksess, .BG-Secondary, .BG-Info, .BG-advarsel, .BG-Danger, .BG-lys, .BG-Dark, .BG-muset.

Html

Her lager vi fem fremdriftsbarer hver med en annen bredde og farge.

Produksjon

Å gi farger til fremdriftsstengene vil legge opp til skjønnheten på nettstedet.

Hvordan lage en stripet fremdriftslinje

En annen morsom ting du kan gjøre for å style en fremdriftslinje er å gjøre den stripete og for å gjøre det tilordne .Progress-Bar-striped klasse til barnebeholderen.

Html

Ovennevnte kode vil generere en stripet fremdriftslinje med 50% bredde.

Produksjon

Slik opprettes en stripet fremdriftsstang.

Hvordan du animerer en fremdriftslinje

Å animere en fremdriftslinje vil få fremdriften i baren til å se ut til å bevege seg. Dette kan gjøres ved å gi .Progress-Bar-animert klasse til fremdriftslinjen sammen med .Progress-Bar-striped klasse.

Html

Her lager vi en stripet animert fremdriftslinje med 50% bredde.

Produksjon

Det er opprettet en animert fremdriftsstang.

Hvordan du kan stable flere fremdriftsstenger

Hvis du ønsker å stable flere fremdriftsstenger sammen, må du bare sette dem inne i fremdriftsbeholderen.

Html

Først
Sekund
Tredje

Ovennevnte kode vil stable opp tre fremdriftsstenger hver med en annen bredde.

Produksjon

Utgangen ovenfor viser tre stablede fremdriftsstenger.

Konklusjon

I Bootstrap 5 kan det opprettes en fremdriftslinje ved å tilordne .framgang klasse til foreldrebeholderen, og .Progress-Bar klasse til barnebeholderen. Du skalerer høyden på en fremdriftslinje ved å tilordne samme høyde til foreldre- og barnebeholderne. En fremdriftslinje kan dessuten merkes ved å plassere litt tekst inni den for å lage fargerike fremdriftsstenger ved å bruke bakgrunnsfargeklasser. Videre kan du lage stripete og animerte fremdriftsbarer ved hjelp av .Progress-Bar-striped, og .Progress-Bar-animert henholdsvis klasser.