Come fare per - Barra di avanzamento JavaScript
Scopri come creare una barra di avanzamento utilizzando JavaScript.
Creazione di una barra di avanzamento
Passaggio 1) Aggiungi HTML:
Esempio
<div id="myProgress">
<div id="myBar"></div>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
#myProgress {
width: 100%;
background-color:
grey;
}
#myBar {
width: 1%;
height:
30px;
background-color: green;
}
Passaggio 3) Aggiungi JavaScript:
Crea una barra di avanzamento dinamica (animata) utilizzando JavaScript:
Esempio
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
Aggiungi etichette
Se desideri aggiungere etichette per indicare fino a che punto l'utente è nel processo, aggiungi un nuovo elemento all'interno (o all'esterno) della barra di avanzamento:
Passaggio 1) Aggiungi HTML:
Esempio
<div id="myProgress">
<div id="myBar">10%</div>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
#myBar {
width: 10%;
height:
30px;
background-color: #04AA6D;
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color:
white;
}
Passaggio 3) Aggiungi JavaScript:
Se desideri aggiornare dinamicamente il testo all'interno dell'etichetta allo stesso valore della larghezza della barra di avanzamento, aggiungi quanto segue:
Esempio
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}