进度条样例

 
    <style type="text/css">
        .container{
            width: 400px;
            height: 20px;
            margin: 0 auto;
            margin-top: 100px;
            border:2px solid #388bfb;
            line-height: 20px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            overflow: hidden;
        }
       
        .time{
            background: #85B9FF;
            height: 100%;
            text-align: center;
            transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            color: #fff;
        }
    </style>
 
    <script type="text/javascript">
            function load(num){
              
                var bar = document.getElementById("bar");
                var container = document.getElementById("container");
                bar.style.width = parseInt(bar.style.width) +10 +"%";
                bar.innerHTML = bar.style.width;
                if(bar.style.width == "100%"){
                    // window.clearTomeout(jindu);
                    container.style.display='none';
                    container.style.visibility="hidden";
                    return;
                     
                }
                var jindu = setTimeout("load()",100);
                }
                window.onload = function(){
                load();
                container.style.diibility="hidden";
                }
    </script>
 
<html>
<body>
<div class="container" id="container">
    <div class="time" id="bar" style="width:0%;"></div>
</div>
</body>
</html>
posted @ 2022-08-01 14:21  茶叶蛋蛋  阅读(37)  评论(0)    收藏  举报