Con l'aiuto di HTML e CSS, gli sviluppatori possono mostrare il loro lavoro creando una barra di avanzamento. Fondamentalmente, viene utilizzato per visualizzare l'avanzamento dell'attuale progetto di sviluppo o di qualsiasi articolo. Inoltre, sono disponibili più metodi in HTML per creare una barra di avanzamento con l'aiuto del tag "", che viene utilizzato per visualizzare un indicatore che mostra l'avanzamento di completamento di un'attività. Inoltre, puoi fare una barra di avanzamento attraverso più proprietà CSS.

Questo post spiegherà:

• Cos'è una barra di progresso?
• Metodo 1: come creare una barra di avanzamento utilizzando un tag HTML?
• Metodo 2: come creare una barra di avanzamento utilizzando le proprietà CSS?

Cos'è una barra di progresso?

Viene utilizzata una barra di avanzamento per rappresentare un elemento di controllo grafico che viene utilizzato per concettualizzare lo stato di un funzionamento del computer migliorato.

Metodo 1: come creare una barra di avanzamento utilizzando un tag HTML?

Per fare una barra di avanzamento con l'aiuto di HTML, guarda le istruzioni seguenti.

Passaggio 1: crea un contenitore di div
Innanzitutto, crea un contenitore div usando il ""Tag e specifica una classe con un nome secondo la tua scelta.

Passaggio 2: aggiungi l'intestazione
Inserire un'intestazione con l'aiuto del "

"Tag e aggiungi testo per l'intestazione tra il tag di intestazione.

Passaggio 3: crea una barra di avanzamento
Ora aggiungi un ""Tag per la creazione della barra di avanzamento. Inoltre, specifica un “valore"Della barra di avanzamento che è in corso e il"max"L'attributo viene utilizzato per l'impostazione della dimensione massima della barra di avanzamento:

In corso

Si può osservare che abbiamo creato con successo una barra di avanzamento:

Metodo 2: come creare una barra di avanzamento utilizzando le proprietà CSS?

Per creare una barra di avanzamento con CSS, prova la procedura menzionata.

Passaggio 1: crea un contenitore div
Prima di tutto, crea un contenitore div usando il ""Tag. Inoltre, aggiungi una classe con un nome specifico all'interno del tag di apertura.

Passaggio 2: crea un altro contenitore di div
Successivamente, crea un altro contenitore tra il primo contenitore Div:

Passaggio 3: Accedi alla classe del contenitore div
Accedi alla classe del contenitore Div con l'aiuto del selettore DOT e il nome della classe come ".ProgressBar-Div"E applica le proprietà menzionate:

.ProgressBar-Div
raggio di confine: 10px;
imbottitura: 3px;
Margine: 50px;
Background-color: RGB (12, 4, 2);

Qui:

• "raggio di confine"La proprietà definisce il raggio del bordo del bordo esterno all'angolo dell'elemento. Gli utenti possono impostare un singolo raggio per creare angoli circolari.
• "imbottitura"Specifica lo spazio all'interno del bordo definito attorno all'elemento.
• "margine"La proprietà specifica uno spazio al di fuori del confine definito.
• "colore di sfondo"È utilizzato per impostare un colore per lo sfondo dell'elemento.

Passaggio 4: fai una barra di avanzamento
Accedi al contenitore interno Div e modellalo come segue:

.ProgressBar-div> div
Background-color: RGB (210, 233, 5);
larghezza: 50%;
Altezza: 30px;
raggio di confine: 12px;

Nel blocco sopra:

• IL "larghezza"La proprietà viene utilizzata per l'impostazione della dimensione dell'elemento in orizzontale.
• Prossimo, "altezza"È utilizzato per allocare l'altezza dell'elemento.
• "raggio di confine"Proprietà utilizzata per creare gli angoli arrotondati.

Produzione

Si trattava di creare la barra di avanzamento con HTML e CSS.

Conclusione

Per creare una barra di avanzamento con HTML e CSS, prima, creare un contenitore di div nidificato e aggiungere il “"Elemento. Quindi, modella il primo contenitore div applicando le proprietà CSS, tra cui "raggio di confine","imbottitura","margine","sfondo", E "colore". Successivamente, modella il Div interiore per fare una barra di avanzamento usando il "larghezza","altezza", E "raggio di confine". Questo post ha spiegato la realizzazione della barra di avanzamento con HTML e CSS.