一款带百分比渐变的js网页Loading进度条效果

最新推荐文章于 2022-10-24 22:27:34 发布

weixin_30553065

最新推荐文章于 2022-10-24 22:27:34 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/youtianxia/p/4718041.html

本文介绍了一种使用JavaScript创建带有百分比渐变的网页加载进度条的方法，通过设置元素宽度和文本显示百分比来实现加载过程的可视化。此教程适合前端开发者了解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
    <head>
    <title>一款带百分比渐变的js网页Loading进度条效果丨kiddy官网</title>
    <script language="javascript">
    function setSB(v, el) {
    var ie5 = (document.all  &&  document.getElementsByTagName);
    if (ie5 || document.readyState == "complete")     {
    filterEl = el.children[0];
    valueEl = el.children[1];
    filterEl.style.width = v + "%";
    valueEl.innerText = v + "%";
    }
    }
    function fakeProgress(v, el) {
    if (v > 100)
    location.href = "http://www.33567.cn";
    else     {
    setSB(v, el);
    window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20);
    }
    }
    </script>
    </head>
    <body onload="fakeProgress(0, sb)">
    <center>
    Webdm.cn正在载入中，请稍侯……
    <span id=sb style="width: 302px">
    <div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #0066cc"></div>
    <div style="font-size: 9pt; width: 100%; text-align: center"></DIV>
    </span>
    </center>
    </body>
    </html>
    <br><br><hr>