BillGilbert icon

progress bar

BillGilbert | PRO | 06/13/19 11:32:29 PM UTC | 0 ⭐ | 293 👁️ | Never ⏰ | []
HTML |

1.59 KB

|

None

|

0 👍

/

0 👎

<!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>

Comments

  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎