css 实现进度条

 <select id="progress" onchange="changeProgress(this)">
       <option value="10%">10%</option>
       <option value="20%">20%</option>
       <option value="30%">30%</option>
       <option value="40%">40%</option>
       <option value="50%">50%</option>
       <option value="60%">60%</option>
       <option value="70%">70%</option>
       <option value="80%">80%</option>
       <option value="90%">90%</option>
       <option value="100%">100%</option>
     </select>
     <div style="border:1px solid gray; width:200px; height:6px; border-radius:6px;">
       <div id="pro" style="height:100%; background-color:red; border-radius:6px;" ></div>
     </div>
     <script type="text/javascript">
     window.onload=function(){
       var p=document.getElementById("progress");
       var oPro=document.getElementById("pro");
       oPro.style.width=p.value;
     }
      function changeProgress(obj){
         var oPro=document.getElementById("pro");
         oPro.style.width=obj.value;
         console.log(obj.value);
      }
     </script>
 
公司让做东西的时候，顺手将这个css进度条写了一遍。记录一下