[html]
<div id="myProgress">
  <div id="myBar"></div>
</div>

<button onclick="move()">Click Me</button>

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

<script>
function move() {
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
        }
    }
}</script>[/html]

Шаг 1) добавить HTML:

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

Шаг 2) добавить CSS:

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

Шаг 3) добавить JavaScript:
Создайте динамический индикатор выполнения (анимированный) с помощью JavaScript:

function move() {
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
        }
    }
}

Добавление меток
Если требуется добавить метки, указывающие, как далеко пользователь находится в процессе, добавьте новый элемент внутри (или снаружи) индикатора выполнения:
[html]
<div id="myProgress">
  <div id="myBar">10%</div>
</div>

<button onclick="move()">Click Me</button>

<style>
#myBar {
    width: 10%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center; /* To center it horizontally (if you want) */
    line-height: 30px; /* To center it vertically */
    color: white;
}
</style>

<script>
function move() {
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
            elem.innerHTML = width * 1 + '%';
        }
    }
}</script>[/html]

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

#myBar {
    width: 10%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center; /* To center it horizontally (if you want) */
    line-height: 30px; /* To center it vertically */
    color: white;
}

Шаг 3) добавить JavaScript:

function move() {
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
            elem.innerHTML = width * 1 + '%';
        }
    }
}

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему