display a progress bar that updates in real time, showing the progress of a task - Posts

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>r</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <style>
            #center{
                position: absolute;
                top: 50%;
                left: 50%;
                text-align: center;
            }
            #downloadCapsule{
                
                width: 300px;
                height: 10px;
                background-color: #dadada;
                border-radius: 100px;
            }
            #progress{
                transition: all cubic-bezier(0.19, 1, 0.22, 1) .2;
                width: 0%;
                height: 100%;
                border-radius: 100px;
                background-color: rgb(42, 196, 42);
            }
            #center h3{
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id="center">
            <h3>Download completed</h3>
            <div id="downloadCapsule">
                <div id="progress"></div>
            </div>
        </div>



    <script>
        var progress = document.querySelector('#progress');
        var h3 = document.querySelector('h3');
        var count = 0;
        var int = setInterval(() => {
            if (count == 100) {
                clearInterval(int);
                h3.style.opacity = 100;
            }
            count++;
            progress.style.width = count + '%';
        }, 100);

    </script>
    </body>
</html>