网页写一个简单进度条

html部分

<div id="fa">
            <div id="son"> <input type="text" id="inp"></div>
        </div>

        <div id="nav">

        </div>

css部分

div#fa {
                width: 350px;
                height: 18px;
                background-color: red;
                border: 2px solid none;
                border-radius:12px;/*设置圆角*/
            }

            div#son {
                animation: nam 3s linear forwards;
                width: 10%;
                height: 100%;
                border-radius: 15px;
                background-color: orange;
            }

            @keyframes nam {
                0% {
                    width: 0;

                }

                100% {
                    width: 100%;

                }
            }

            #inp {
                position:absolute;
                left: 40%;
                width: 200px;
                border: 0px;
                background-color:transparent;/*设置背景透明*/
                color: aliceblue;
            }

js部分

    let ofa = document.querySelector("#fa");
            let oson = document.querySelector("#son");
            let inp = document.querySelector("#inp");
            setInterval(() => {
                let num = `${parseInt( oson.clientWidth/ofa.clientWidth*100 ) }%`;
                inp.value = num;
            }, 210);