Come creare una barra di avanzamento in HTML?

Le barre di avanzamento vengono utilizzate per determinare determinati traguardi durante un'attività in una percentuale. Puoi creare una barra di avanzamento in che specifica l'avanzamento del completamento di un'attività. Il valore della barra di avanzamento può essere manipolato da JavaScript. In questo articolo vedremo come creare una barra di avanzamento con l'aiuto di HTML, CSS e JavaScript nella seguente sequenza:

• Come creare una barra di avanzamento in HTML?
• Barra di avanzamento: esempio

Cominciamo.

Come creare una barra di avanzamento in HTML?

Una barra di avanzamento rappresenta lo stato di avanzamento di qualsiasi attività che viene eseguita. In genere, queste barre vengono utilizzate per mostrare lo stato del download e del caricamento. Possiamo dire che le barre di avanzamento possono essere utilizzate per rappresentare lo stato di tutto ciò che è in corso.

Per creare una barra di avanzamento di base utilizzando , è necessario eseguire i seguenti passaggi:

def __init__ python

• Crea una struttura HTML per la tua barra di avanzamento - Il codice HTML etichetta specifica l'avanzamento del completamento di un'attività.

• Aggiunta di CSS - Il passaggio successivo consiste nell'aggiungere il colore di sfondo della barra di avanzamento e lo stato di avanzamento nella barra con l'aiuto di CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• Aggiunta di JavaScript - Il passaggio successivo consiste nel creare una barra di avanzamento animata dinamica utilizzando funzioni javascript aggiornare e scena .

funzione update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = larghezza + '%'}}}

Ora che conosci i diversi passaggi per creare una barra di avanzamento, andiamo avanti e diamo un'occhiata all'esempio completo di una barra di avanzamento.

Barra di avanzamento: esempio

Dopo aver completato i diversi passaggi per creare una barra di avanzamento, è il momento di collegare HTML, CSS e Elementi JavaScript . L'esempio seguente mostra il codice completo della barra di avanzamento che collega quanto sopra HTML, CSS e JavaScript Codici:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Esempio di barra di avanzamento utilizzando JavaScript
 
Scarica lo stato di un file:
  
Avvia il download della funzione update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {larghezza ++ element.style.width = larghezza + '%'}}}

Produzione:

Con questo, siamo giunti alla fine del nostro articolo. Spero che tu abbia compreso i diversi passaggi necessari per creare una barra di avanzamento.

Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con le tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Hai domande per noi? Per favore menzionalo nella sezione commenti di questo blog e ti risponderemo.