页面加载进度条–progress

  • Post author:
  • Post category:其他


这里写图片描述

<progress max="100"></progress>
<script type="text/javascript">
    var timer, percent = 0;
    timer = setInterval(function() {
        percent += 10;
        if (percent > 100) {
            clearInterval(timer);
            $("progress").fadeOut();
        } else {
            $("progress").val(percent);
        }
    }, 1000);
</script>

 <style>
        progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #e6e6e6;
            color: #21a5e0;
        }

        progress::-moz-progress-bar {
            background: #21a5e0;
        }

        progress::-webkit-progress-bar {
            background: #e6e6e6;
        }

        progress::-webkit-progress-value {
            background: #21a5e0;
        }
    </style>



版权声明:本文为u010772819原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。