关于网页头部进度条的加载效果实现

最新推荐文章于 2022-09-29 19:15:35 发布

qq_36202069

最新推荐文章于 2022-09-29 19:15:35 发布

阅读量895

点赞数

分类专栏： js小特效文章标签：网页头部进度条实现

本文链接：https://blog.csdn.net/qq_36202069/article/details/79022233

版权

js小特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目前为止，好像并不能判断根据真实的加载资源返回进度，我们可以通过浏览器加载到文档的哪个部分来模拟获取真实进度

第一步：引入jquery

html区：

<body>
<div class="loading"></div>
<div id="header">
    页头部分</div>
<script type="text/javascript">
    $('.loading').animate({'width':'33%'},50);
    //第一个进度节点
</script>
<div id="mainpage">
    左侧内容
</div>
<script type="text/javascript">
    $('.loading').animate({'width':'55%'},50);//延迟50ms增加真实度
    //第二个进度节点
</script>
<div id="sider">
    右边侧栏
</div>
<script type="text/javascript">
    $('.loading').animate({'width':'80%'},50);
    //第三个进度节点
</script>
<div id="footer">
    页脚部分
</div>
<script type="text/javascript">
    $('.loading').animate({'width':'100%'},50);
    //第四个进度节点
</script>
</body>

css区：

      .loading{
            background:#FF6100;
        height:5px;
        position:fixed;
        top:0;
        z-index:99999
        }

js区：

 $(document).ready(function(){
        $('.loading').fadeOut();//完成后消失
    });

qq_36202069

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于网页头部进度条的加载效果实现

目前为止，好像并不能判断根据真实的加载资源返回进度，我们可以通过浏览器加载到文档的哪个部分来模拟获取真实进度第一步：引入jqueryhtml区：页头部分 $('.loading').animate({'width':'33%'},50); //第一个进度节点左侧内容 $('.loading').animate({'width':'
复制链接

扫一扫