Jak stworzyć: Pasek postępu JavaScript

Stwórz pasek postępu

Krok 1 - Dodaj HTML:

<div id="myProgress">
  <div id="myBar"></div>
</div>

Krok 2 - Dodaj CSS:

#myProgress {
  width: 100%;
  background-color: grey;
}
#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

Krok 3 - Dodaj JavaScript:

Użyj JavaScript do stworzenia dynamicznego paska postępu (efekt animacji):

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 + "%";
      }
    }
  }
}

Spróbuj sam

Dodaj etykietę

Jeśli chcesz dodać etykietę, aby wskazywała użytkownikowi postęp w bieżącym procesie, dodaj nowy element wewnątrz (lub na zewnątrz) paska postępu:

Krok 1 - Dodaj HTML:

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

Krok 2 - Dodaj CSS:

#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* Wyrównanie poziome (jeśli jest to konieczne) */
  line-height: 30px; /* Wyrównanie pionowe */
  color: white;
}

Spróbuj sam

Krok 3 - Dodaj JavaScript:

Jeśli chcesz dynamicznie aktualizować tekst w etykiecie, aby był zgodny z szerokością paska postępu, dodaj następujące zawartość:

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 = szerokość + "%";
      }
    }
  }
}

Spróbuj sam