How to Create Progress Bar | HTML Tutorials | CSS Tutorials | JavaScript Tutorials




In this video we will create an animated progress bar using HTML, CSS and JavaScript. It just an animation for now but during content loading on the page you can use them according to the load time of data.

Original source


8 responses to “How to Create Progress Bar | HTML Tutorials | CSS Tutorials | JavaScript Tutorials”

  1. HELP MEEE animation does not appear:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title> test 2 </title>
    <meta charset="="utf-8">
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div id="percentCount" class="percent-count" </div>
    <div class="progress-bar">
    <div class="progress" id="progress"> </div>
    </div>

    <script src="script.js"></script>
    </body>
    </html>

    <style>
    * {
    box-sizing: border-box;
    }
    body {
    margin: 0;
    padding: 0;
    background: #333;
    }
    .percent-count {
    width: 450px;
    height: 50px;
    margin: 100px auto;
    font-size: 50px;
    text-align: center;
    color: #fff;
    }
    .progress-bar {
    width: 506px;
    height: 26px;
    background-color: #bbb;
    border-radius: 13px;
    padding: 3px;
    margin: 50px auto;
    }
    .progress {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: dodgerblue;
    </style>
    }

    //scripts.js code
    function progress() {
    var prg = document.getElementById('progress');
    var percent = document.getElementById('percentCount');
    var counter = 5;
    var progress = 25;
    var id = serInterval(frame, 50);

    function frame() {
    if(progress == 500 && counter == 100) {
    clearInterval(id);
    } else {
    progress += 5;
    counter += 1;
    prg;style.width = progress + 'px';
    percent.innerHTML + counter + '%';
    }
    }
    }

    progress();

Leave a Reply