常用的网页加载进度条之【制作进度条】

最新推荐文章于 2023-01-27 21:02:20 发布
原创 最新推荐文章于 2023-01-27 21:02:20 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #动画

本文介绍如何创建网页加载进度条，纠正定时器误区，通过加载状态事件实现真实进度，并利用CSS3制作小动画。内容包括网页加载状态事件、CSS3进度条动画的实现方法和资源推荐。

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

一、课程介绍

随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢得多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更快人性化的方式给用户展现。

下来我们通过几个页面来看一下网上有哪些常见的进度条。

（1）阿里的字体库阿里字体库

会发现有个等待的小动画，那三个变换的小圈圈，这个页面比较简单，内容一下子就加载出来了

（2）再来看一下hao123hao123

这里的内容比较多一点，会发现网页加载的时候，页面上方会有一条绿色的线条从左到右的一个进度。

（3）还有一些国外的网站，我们再来看一下。国内的网站加载速度一般都比较快。TOTAL:SpaceTravellers

这个加载的期间，其实就是一个CSS的一个小动画，这个显得有点枯燥了

（4）还有一些网站，点击进去它的加载方式是计时，就是从0一直到100%的时候，咱们看到具体的数据，我们也能够清楚还有多长时间可以进入我们的主体页面。Proud & Punch |

网上这些效果是特别的多的，所以我给大家介绍了几个内容。

现在我们开始学习。

预备知识

  • 代码编辑器
  • HTML5+CSS3-网页排版
  • JavaScript-通过函数写特效

二、制作进度条

（一）网页加载进度条误区

有人认为进度条是不是可以给它一个定时器，比如说让它延迟3秒钟或者延迟5秒钟之后再来加载我们的相关内容，这种方法并不是说不行，那么我们这个网页延迟3秒钟之后呢，大多数的图像或者主体已经加载过来了，也是可以的。

这种用定时器的方法可以解决一部分的问题，但是弊端也是非常大的。比如说页面已经打开过了，已经缓存在本地了，那么我们再用定时器的时候，它这个效率肯定是比较低的。因为无论有没有这个缓存，它都要执行这个3秒钟的延迟，所以说这个效率和体验都不太良好。

之所以很多同学会用这个定时器，因为在网上搜索的时候，有很多这个进度条都是根据定时器来做的。比如在百度上面搜索一下信息进度条，随便打开一个，预览一下，这个就是一个定时器，根据一个时间到结尾的时候把当前页面清掉，展示我们相应的内容，这些东西都是关于一些定时器的。这种方法只能说从表现上已经实现了进度条，但是实质不是一个真正的进度条。

那么我们看一下真的进度条应该怎么去做。

我们一会会详细讲解根据主体内容来加载进度条，现在我们主要做一个简单的加载小动画的东西，加载完成之后，再展示我们的相应的页面，我们最起码应该先把布局和结构先弄清楚。默认的是页面上方有透明的或者不透明的背景，把主体内容遮挡住，中间有个小动画，当我们的页面加载完成完成之后，再让它把后面的内容展示出来。这里我们先用这种误区做一个定时器的方法，暂时演示一下我们的布局结构。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器的进度条</title>
        <style>
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
                /*如果页面上只有白色，那么我们看起来非常枯燥，也不知道是什么东西。所以说需要加载一个小动画，一种是加载一张图像，另一种方法是利用CSS3加一个有意思的动画。推荐如果找一些比较有趣味的图像：【https://preloaders.net/】在线生成的GIF图标，我们使用网上常见的类型*/
            }
            .loading .pic {
                width: 64px;
                height: 64px;
                background: url(https://img-blog.youkuaiyun.com/20170921155431809);
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <!-- 遮挡页面 -->
        <!-- <div class="loading">
            <div class="pic"></div>
        </div> -->
        <!--
            页面上主要的部分就是图像，因为一个代码它最大可能就是几十kb，jQuery库也就是90kb，那么一张图呢有的时候能达到1M，所以说有的时候这个图像是我们页面加载的重点，所以说在这里找几个比较大的图像，本地图像加载是比较快的，所以在网上找几个网络图像，为了让它加载的比较慢一点。我们这个用的是定时器，所以我们也不用太关注这个加载速度，到了固定时间之后就会自动显示我们的相关内容了
        -->
        <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">
        <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">
        <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">
        <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">
        <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">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                var loading = '<div class="loading"><div class="pic"></div></div>';
                $("body").append(loading);
                setInterval(function(){
                    $(".loading").fadeOut();
                    /*3s之后内容就显示出来了，这种东西只是一种写死的数据，不是真正的反应加载的内容，所以这个方法也不是一个完全正确的方法，它只能解决一部分的问题。这个案例主要是给大家介绍一下，如果做一个这样的进度条，应该是采用一个什么样的布局结构*/
                }, 3000);
            });
        </script>
    </body>
</html>
（二）通过加载状态事件制作进度条

使用定时器只能是针对一个固定的时间来加载内容，但是这种东西并不切合实际，那么在这里我们讲一个切合实际的东西，就是当我们内容真正加载完成之后再来显示内容。

这里讲一下重点知识：

  • document.onreadystatechange 页面加载状态改变时的事件

  • document.readyState 返回当前文档的状态

    • uninitialized 还未开始载入
    • loading 载入中
    • interactive 已加载，文档与用户可以开始交互
    • complete 载入完成
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器2</title>
        <style>
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
            .loading .pic {
                width: 64px;
                height: 64px;
                background: url(https://img-blog.youkuaiyun.com/20170921155431809);
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <!-- 遮挡页面 -->
        <div class="loading">
            <div class="pic"></div>
        </div>
        <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">
        <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">
        <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">
        <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">
        <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">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script>
            document.onreadystatechange = function(){
                /*我们先看一下返回当前文档的状态*/
                //console.log(document.readyState);//interactive   complete
                if(document.readyState == "complete"){//如果内容已经完全加载成功
                    //将加载图片隐藏
                    $(".loading").fadeOut();
                }
            }
        </script>
    </body>
</html>

这个内容是比较容易的，结果是简单粗暴的。但是效果比上个好多了。

（三）CSS3进度条小动画

之前的进度条只是用了一张图像，那么这个图像是比较小的，但是和代码比起来还是稍微要大一些的。从长远角度来讲，我们的代码可能会让页面加载速度更快一些，所以说我们尽量不用图像的时候还是不要引用图像。

那么在这里，我们介绍一下CSS3的进度条小动画。在这里给大家提供一个网址，这个网址可以给大家提供一些进度条动画。当然有各种类型的动画条可以生成SVG，CSS，GIF的这几种格式。

下面我们用CSS动画实现一种加载效果：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进度条3</title>
        <style>
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
            .loading .pic {
                width: 50px;
                height: 50px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            .loading .pic i {
                display: block;
                float: left;
                width: 6px;
                height: 50px;
                background: #399;
                margin: 0 2px;
                /*各个竖线的高度缩小到40%的长度*/
                -webkit-transform: scaleY(0.4);
                    -ms-transform: scaleY(0.4);
                        transform: scaleY(0.4);
                /*调用动画load，动画完成总时间为1.2s，连续做动画*/
                -webkit-animation: load 1.2s infinite;
                        animation: load 1.2s infinite;
            }
            /*设置每个竖线的延长时间，第一个不用延长时间，第二个依次延长0.1s*/
            .loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
            .loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
            .loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
            .loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
            /*定义加载动画load*/
            @-webkit-keyframes load {
                0%, 40%, 100% {
                    -webkit-transform: scaleY(0.4);
                            transform: scaleY(0.4);
                }
                20% {
                    -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                }
            }
            @keyframes load {
                0%, 40%, 100% {
                    -webkit-transform: scaleY(0.4);
                            transform: scaleY(0.4);
                }
                20% {
                    -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                }
            }
            /*完了以后不要忘记兼容性问题，复制CSS样式代码，打开一个网址（http://autoprefixer.github.io/）粘贴到左边的框里，右边会生成兼容性代码，然后复制，替换原来的CSS样式代码粘贴。*/
        </style>
    </head>
    <body>
        <!-- 遮挡页面 -->
        <div class="loading">
            <div class="pic">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
        <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">
        <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">
        <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">
        <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">
        <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">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script>
            document.onreadystatechange = function(){
                if(document.readyState == "complete"){
                    $(".loading").fadeOut();
                }
            }
        </script>
    </body>
</html>

这种方法结合第二个案例的js，其实是页面上最常使用的方法，所以说像一些这种CSS3的加载效果我们可以自己来写，如果你觉得这种东西很费劲，那么你可以使用www.loading.io然后来形成这样的一个CSS。我们只需要把代码粘贴到我们页面的CSS里面来，在animation里面应用这个动画即可。

注意

今天我们先写到这里，下一节编辑定位在头部的进度条。

加载界面（伪加载），进度条制作，让人物图片动起来
yuanyuanluoluo的博客
08-03 1940
这个加载速度其实是我自己代码控制的，不是真正的资源加载 核心代码：private AsyncOperation asy; public UIProgressBar pro; //public UILabel mylabel; // Use this for initialization void Start () { if (pro) {
常用的网页加载进度条
前端啥也不懂
09-18 1405
关于进度条的图片，有几个专门的网站可以下载 https://icons8.com/preloaders/，   可以在这里直接下载需要使用的进度条类型图片     1.使用定时器来做一个固定时间的进度条 好处是比较简单，容易实现，缺点是当页面在电脑中已经有缓存了，本来可以快速加载页面的，但是每次仍然需要加载定时器的进度条，等待一个固定的时间 2.通过加载状态事件制作进度条 doc...
通过网页加载状态事件制作进度条
李豆豆的博客
08-27 1419
事件： 1、document.onreadystatechance  页面加载状态改变时的事件 2、document.readyState  返回当前文档的状态       还未载入：uninitialized       载入中：loading       已加载，文档与用户可以开始交互：interactive       载入完成：complete
Web实例——进度条
weixin_45975504的博客
01-27 1955
使用html，css和javascript 实现一个简单的进度条效果。
HTML进度条的制作
pan_junbiao的博客
09-30 6086
HTML进度条的制作 1、HTML代码 经验值： &lt;span class="progress-bar"&gt;&lt;b style="width:50px;"&gt; &lt;/b&gt;&lt;/span&gt; 2、CSS样式 .progress-bar, .progress-bar b{background: url("/images/ico.png") no
给网站制作进度条
weixin_46704937的博客
11-08 289
【代码】给网站制作进度条。
jquery插件NProgress.js制作网页加载进度条
12-02
NProgress.js 是一款轻量级的 jQuery 插件，专门用于创建精细的网页加载进度条。这个插件受到 Google、YouTube 和 Medium 等知名网站的启发，提供了一种优雅的方式来展示网页内容加载的进度，从而提升用户体验。尤其...
Loading网页加载进度条动画效果.zip
11-24
"Loading网页加载进度条动画效果.zip"这个压缩包文件很可能包含了一套实现网页加载进度条动画的代码示例，主要涉及到的技术有CSS、前端开发、JavaScript、HTML5以及jQuery。这些技术共同作用于创建一个动态的、吸引...
我制作了2款 显示网页加载进度的网页加载进度条.就是在网页最上面显示网页加载进度.zip_js实现加载条
01-09
我制作了2款 显示网页加载进度的网页加载进度条.就是在网页最上面显示网页加载进度.zip
页面进度条制作
......
07-04 822
一、假象的进度条 1、在网页上面添加一个 div层，占满整个页面，然后设置背景为某个加载进度的gif图像。         2、在页面写js,等待指定时间后，隐藏遮罩层:         $("body").ready(function(){ $(".layer").fadeout(); },5000) 二、真正能测试到页面加载时间的进度条       1、document.onre
【H5】精美加载进度条
12-02
H5精美加载进度条样式齐全，包含各种颜色（且同时提供模板类自定义颜色及其他样式设置）各种loading样式，不影响原来页面布局，适用于绝大部分网站，直接导入依赖JS与相关样式CSS即可使用。 介绍博文：https://blog.youkuaiyun.com/m0_53129012/article/details/110505144
canvas实现动态加载进度条
04-12
用canvas实现动态进度条加载动画，模拟动态监测数据
网页制作简单排版的html
09-24
网页制作中比较简单的排版，和搭配的CSS文件下载的话，会得到有文字，有空格栏的效果
NGUI与UGUI制作Loading条
JeanShaw的专栏
04-29 1744
加载过程需要自己编写脚本，命名为ProgressBar_Test往里面添加代码： 变量部分：     public UIProgressBar bar;     public UILabel label;     public UIEasing.EasingType easing = UIEasing.EasingType.easeLinear;     public float dur
如何在网页上实现进度条
慧龙网
02-06 1556
进度条的实现可以通过下面的javascript实现：                           var progressEnd = 9;  // set to number of progress s.var
带进度条的Loading制作
crystaljava的专栏
03-22 1349
带进度条的Loading制作 作者:9981工作室 　点击数： 5603
网页加载进度条
daisy
10-13 425
随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。 下面介绍两种方法： 1。利用定时器：（此方法能解决一部分问题，但是只是静态的死数据）代码如下： html； css样式：
h5加载进度条
weixin_42870180的博客
04-12 3055
html代码 <div id="plan"> <p id="planning">进度：0%</p> <progress id="proceed" max="100" value="0"></progress> </div> 使用progress标签，设置好min和max数值。可以用value获取其中的...
制作页面进度条-前端js
weixin_37427971的博客
08-14 1009
一。通过加载状态事件制作进度条 知识点： 1.方法document.onreadystatechange 页面加载状态改变时的事件 document.readyState 返回当前文档的状态 用这两个事件来检测网站加载的状态 即用document.onreadystatechange作为切入点，检测document.readyState的值，若等于complete就表示页面加载完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值