How To Create Progress Bar Using CSS And JavaScript

admin_img Posted By Bajarangi soft , Posted On 06-10-2020

In Java script we can create progress bar which will show the levels of uploading data, so today we discuss how to create progress bar using java script

How To Create Progress Bar Using CSS And JavaScript

Creating a Progress Bar
Step 1: Create index.html and implement below code.

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

Step 2: Now implement CSS code for progress bar.
<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 10%;
        height: 30px;
        background-color: tomato;
        text-align: center;
        line-height: 30px;
        color: white;
    }
</style>


Step 3: Now Implement java script to progress bar.

<script>
    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 = width  + "%";
                }
            }
        }
    }
</script>


Complete Code For Creating Progress Bar Using CSS And JavaScript
<!DOCTYPE html>
<html>
<head>
    <title>How To Create Progress Bar Using CSS And JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 10%;
        height: 30px;
        background-color: tomato;
        text-align: center;
        line-height: 30px;
        color: white;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 style="color: tomato">How To Create Progress Bar Using CSS And JavaScript</h1>
    </div>
    <div class="well">
        <h1>JavaScript Progress Bar</h1>

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

        <br>
        <button class="btn btn-success" onclick="move()">Click Me</button>

        <script>
            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 = width + "%";
                        }
                    }
                }
            }
        </script>
    </div>
</div>
</body>
</html>

Related Post