常用的网页加载进度条之【定位在头部的进度条】

最新推荐文章于 2023-07-21 17:14:56 发布

WJM_Aunt

最新推荐文章于 2023-07-21 17:14:56 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css jquery 文章标签：前端 CSS jQuery

本文链接：https://blog.csdn.net/WJM_Aunt/article/details/78121226

css 同时被 2 个专栏收录

7 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

本文介绍了一种利用HTML、CSS及jQuery实现的简单网页加载进度条特效。该方法通过逐段加载页面元素并更新顶部进度条的方式，为用户提供直观的加载反馈。

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

之前展示的时候已经给大家看过这个效果了，比如说hao123，那么当我们进入页面的时候就会有一个从左到右的线条。

那么我们就来介绍一下这个效果。其实这个方法是非常简单的，主要是采用页面从上到下逐次加载的顺序结构而做成的一个程序。我们来看一下这个结构的具体做法：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进度条4</title>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <style>
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
            .loading .pic {
                /*页面开始加载的时候上方显示的一条线，默认宽度为0*/
                width: 0%;
                height: 5px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: #f33;
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="pic"></div>
        </div>

        <header>
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
        </header>
        <!--设置页面头部加载完成是线条的宽度为10%，以此类推，当页面全部加载完成时，上方线条的宽度为100%-->
        <script>
            $(".loading .pic").animate({width: "10%"}, 100);;
        </script>

        <section class="banner">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "30%"}, 100);;
        </script>

        <section class="about">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "50%"}, 100);;
        </script>

        <section class="pro">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "70%"}, 100);;
        </script>

        <section class="news">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "90%"}, 100);;
        </script>

        <footer>
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        </footer>
        <!--当线条的宽度显示为100%时，将红色线条隐藏，显示内容-->
        <script>
            $(".loading .pic").animate({width: "100%"}, 100, function(){
                $(".loading").fadeOut();
            });;
        </script>

        <!--但是这个方法有一个问题，就是虽然我们看见内容已经加载完了，但是这个只是把图片的数据载入进来，有的图片是从上到下慢慢加载的，这个是不影响页面，因此这个方法也可以使用，这个就是采用了从上到下的执行顺序的特效来完成这个效果。如果你想让效果更加的流畅，可以把走到每一个模块线条的样式拆分的细一点-->
    </body>
</html>