progress bar

<!DOCTYPE html>
<html>
<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 1%;
        height: 30px;
        background-color: #4CAF50;
    }
</style>
<body>

<h1>JavaScript Progress Bar</h1>

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

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

<script>
    window.onload = function() {
        checkStatus();
    };

    var id;
    var width;
    function move() {
        var elem = document.getElementById("myBar");

        id = setInterval(frame, 40);

        var currentValue = localStorage.getItem('progressValue');
        var currentStatus = localStorage.getItem('buttonState');

        width = 1;

        if (currentValue) {
            if (currentStatus==='running') {
                width = currentValue;
            }
        }

        function frame() {
            if (width >= 100) {
                clearInterval(id);
                localStorage.setItem('buttonState', 'stop');
            } else {
                localStorage.setItem('progressValue', width);
                localStorage.setItem('buttonState', 'running');

                width++;
                elem.style.width = width + '%';
             }
        }
    }

    function checkStatus(){
        var progressStatus = localStorage.getItem('buttonState');

        if (progressStatus==='running') {
            move();
        } else {
            localStorage.setItem('buttonState', 'stop');
        }
    }

</script>

</body>
</html>