Ved hjelp av HTML og CSS kan utviklerne vise frem arbeidet sitt ved å lage en fremdriftslinje. I utgangspunktet brukes det til å se fremdriften i det nåværende utviklingsprosjektet eller et hvilket som helst vare. Videre er flere metoder tilgjengelige i HTML for å lage en fremdriftslinje ved hjelp av "" -merket, som brukes til å vise en indikator som viser fullføringsfremgangen til en oppgave. I tillegg kan du lage en fremdriftslinje gjennom flere CSS -egenskaper.

Dette innlegget vil forklare:

• Hva er en fremdriftslinje?
• Metode 1: Hvordan lage en fremdriftslinje ved å bruke en HTML -tag?
• Metode 2: Hvordan lage en fremdriftslinje ved å bruke CSS -egenskapene?

Hva er en fremdriftslinje?

En fremdriftslinje brukes til å representere et grafisk kontrollelement som brukes til å konseptualisere statusen til en forbedret datamaskinoperasjon.

Metode 1: Hvordan lage en fremdriftslinje ved å bruke en HTML -tag?

For å lage en fremdriftslinje ved hjelp av HTML, se på instruksjonene nedenfor.

Trinn 1: Lag en div container
Først må du lage en DIV -beholder ved hjelp av “”Merk og spesifiser en klasse med et navn i henhold til ditt valg.

Trinn 2: Legg til overskrift
Sett inn en overskrift ved hjelp av “

”Merk og legg til tekst for overskriften mellom overskriften.

Trinn 3: Lag fremdriftslinje
Nå, legg til en "”Tag for å lage fremdriftslinjen. Spesifiser også en "verdi”Av fremdriftslinjen som pågår, og“Maks”Attributt brukes for å sette maksimal størrelse på fremdriftslinjen:

I prosess

Det kan observeres at vi har laget en fremdriftslinje:

Metode 2: Hvordan lage en fremdriftslinje ved å bruke CSS -egenskapene?

For å lage en fremdriftslinje med CSS, kan du prøve ut den nevnte prosedyren.

Trinn 1: Lag en div container
Først av alt, lag en div container ved å bruke “" stikkord. Legg også til en klasse med et spesifikt navn inne i åpningskoden.

Trinn 2: Lag en annen div container
Neste, lag en annen beholder mellom den første div -beholderen:

Trinn 3: Access Div Container Class
Få tilgang til DIV Container -klassen ved hjelp av DOT -velgeren og klassenavnet som “.ProgressBar-Div”Og bruk de nevnte egenskapene:

.ProgressBar-Div
Border-Radius: 10px;
polstring: 3px;
Margin: 50px;
bakgrunnsfarge: RGB (12, 4, 2);

Her:

• “Border-Radius”Eiendom definerer radien til elementet hjørne ytre grensekant. Brukere kan angi en enkelt radius for å lage sirkulære hjørner.
• “polstring”Angir plassen inne i den definerte grensen rundt elementet.
• “margin”Eiendom spesifiserer et rom utenfor den definerte grensen.
• “bakgrunnsfarge”Brukes for å sette en farge for elementets bakgrunn.

Trinn 4: Gjør en fremdriftslinje
Få tilgang til den indre div beholderen og stil den som følger:

.ProgressBar-Div> Div
bakgrunnsfarge: RGB (210, 233, 5);
Bredde: 50%;
Høyde: 30px;
Border-Radius: 12px;

I ovennevnte kodeblokk:

• “bredde”Eiendom brukes til å sette størrelsen på elementet horisontalt.
• Neste, “høyde”Brukes for å tildele høyden på elementet.
• “Border-Radius”Eiendom som brukes til å lage de avrundede hjørnene.

Produksjon

Det handlet om å lage fremdriftslinjen med HTML og CSS.

Konklusjon

For å lage en fremdriftslinje med HTML og CSS, først, oppretter en nestet div -container og tilsett "”Element. Styler deretter den første div -beholderen ved å bruke CSS -egenskapene, inkludert "Border-Radius”,“polstring”,“margin”,“bakgrunn”, Og“farge”. Neste, stil den indre div for å lage en fremdriftsbar ved å bruke “bredde”,“høyde”, Og“Border-Radius”. Dette innlegget forklarte å gjøre fremdriftslinjen med HTML og CSS.