Progress Bar

[tklustig]

Hallo Leute,
folgender Code aktiviert eine dynamisch erzeugte Progressbar wie gewünscht. Meine Intention ist es, die Progressbar unabhängig von dem Button zu starten. Bereits beim rendern der PHP-Seite soll sie in Gang gesetzt werden. Weiß jemand , inwiefern ich den Code ändern muss?

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<?php
use yii\bootstrap\Progress;
?>
<div class="mail-eingang-form">
    <?php
    echo Progress::widget([
        'barOptions' => ['class' => 'progress-bar-success'],
        'options' => ['class' => 'active progress-striped'],
        'bars' => [
            ['percent' => 35, 'label' => 'Connecting IMAP server is running...', 'options' => ['class' => 'progress-bar-success']]],
    ]);
    ?>
</div>
<div class="w3-container">
    <h2>Dynamic Progress Bar with Labels</h2>
    <div class="w3-light-grey">
        <div id="myBar" class="w3-container w3-green w3-center" style="width:1%">1%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Start ProgressBar</button>
</div>
<script>
    function move() {
        var elem = document.getElementById("myBar");
        var width = 1;
        var id = setInterval(frame, 50);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
                elem.innerHTML = width * 1 + '%';
            }
        }
    }
</script>

 

[Sempervivum]

Sollte funtionieren, indem Du einfach die Funtion move() direkt aufrufst, so wie es der Button tut:

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