进度条``` <!DOCTYPE html> <html lang="en"> <head> <meta charset

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>进度条</title>

    <style type="text/css" id='css'>

        .progress-container{

            border: 1px solid black;

            display: flex;

        }



        .progress-bar{

            height: 30px;

            background-color: gainsboro;

            text-align: center;           

        }

        .progress-text{

            font-weight: bold;

            line-height: 30px;

            position: fixed;

            left:50%;

            /* position: absolute; */

        }

    </style>

    </head>

    

    <body>

        <div class="progress-container">

            <div class="progress-bar"></div>

            <div class="progress-text">25%</div>

        </div>

    

        <script>

                const bar= document.querySelector(".progress-bar"); 

                const text = document.querySelector(".progress-text");   

                let width = 0;

                function move() {

                        width++; 

                        bar.style.width = width + '%'; 

                        text.innerHTML =  width + '%'; 

                        if( width==100 ){

                            clearInterval(time);

                        }

                    }

                let time= setInterval(move, 100);    

    </script>

</body>

</html>