简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar

A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar

青灯夜游
青灯夜游forward
2021-02-25 10:27:543029browse

A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar

[Recommended tutorial: CSS video tutorial]

There are three ways to implement the front-end web page loading progress bar, depending on your needs:

1. Top progress bar

Insert jq code in the middle of the html code to execute the animation. Which part of the page is loaded, the progress bar will move forward accordingly

When all loading is completed, the loading progress bar module will be hidden

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <title>顶部进度条</title>
    <style>
        .loading {position: fixed;top: 0;left: 0; width: 100%; height: 100%; background-color: #fff;}
        .pic {width: 0;height: 10px;background-color: #c33;border-radius: 5px;}
    </style>
</head>
<body>
    <div>
        <div></div>
    </div>
    <header>
        <img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="">
        <img src="http://img12.3lian.com/gaoqing02/02/93/37.jpg" alt="">
    </header>
    <script>
        $(".loading .pic").animate({width: "20%"},100);
    </script>
    <section>
        <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg" alt="">
        <img src="http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg" alt="">
    </section>
    <script>
        $(".loading .pic").animate({width: "40%"},100);
    </script>
    <section>
        <img src="http://cdn.duitang.com/uploads/item/201409/08/20140908130732_kVXzh.jpeg" alt="">
        <img src="http://file02.16sucai.com/d/file/2014/1006/e94e4f70870be76a018dff428306c5a3.jpg" alt="">
    </section>
    <script>
        $(".loading .pic").animate({width: "60%"},100);
    </script>
    <section>
        <img src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" alt="">
    </section>
    <script>
        $(".loading .pic").animate({width: "80%"},100);
    </script>
    <footer>
        <img src="http://img.51ztzj.com/upload/image/20130417/201304172007_670x419.jpg" alt="">
        <img src="http://img0.imgtn.bdimg.com/it/u=1618007397,4183425847&fm=26&gp=0.jpg" alt="">
    </footer>
    <script>
        $(".loading .pic").animate({width: "100%"},100, function() {
            $(".loading").fadeOut();
        });
    </script>
</body>
</html>

2. Insert the dynamic picture about loading directly into the page, and then hide it after the page is loaded.

You can find the picture on this website: https:// loading.io/ You can adjust the style according to your own needs

A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar

##Of course, if you want to write it yourself, you can also follow the blog A small animation written by myself using css3

A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress barA brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar

##The code is as follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3动画进度条</title>
    <style>
        .loading {position: fixed;top:0;left:0;width: 100%; height: 100%;background-color: #fff;}
        .pic {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height:40px;}
        .pic i {float:left;margin: 0 2px;width: 6px;height: 30px;background-color: indigo;transform: scaleY(0.4);animation: load 1.2s infinite;}
        .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
        .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
        .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
        .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
        .pic i:nth-child(6){-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
        @-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)}
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        document.onreadystatechange = function() {  // 页面状态发生改变时触发
            if(document.readyState == "complete") {  // 页面加载完成时隐藏
                $(".loading").fadeOut();
            }
        }
    </script>
</head>
<body>
    <div>
        <div>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    <img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="">
    <img src="http://img12.3lian.com/gaoqing02/02/93/37.jpg" alt="">
    <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg" alt="">
    <img src="http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg" alt="">
    <img src="http://cdn.duitang.com/uploads/item/201409/08/20140908130732_kVXzh.jpeg" alt="">
    <img src="http://file02.16sucai.com/d/file/2014/1006/e94e4f70870be76a018dff428306c5a3.jpg" alt="">
    <img src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" alt="">
    <img src="http://img.51ztzj.com/upload/image/20130417/201304172007_670x419.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1618007397,4183425847&fm=26&gp=0.jpg" alt="">
</body>
</html>

3. Real-time data acquisition progress bar (percentage)

A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar

The code is as follows 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百分比进度条</title>
    <style>
        .loading {position: fixed;top:0;left:0;width: 100%; height: 100%;background-color: #fff;}
        .pic {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height:100px;line-height: 55px;text-align: center;font-size: 22px;}
        .pic span {display: inline-block;position: absolute;top: 10px;left: 10px;width: 80px;height: 80px;border-radius: 50%;box-shadow: 0 3px 0 #999;
                -webkit-animation: move 1s infinite linear;animation: move 1s infinite linear;}
        @-webkit-keyframes move {
            0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
            100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
        }
        @keyframes move {
            0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
            100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            var img = $("img"); // 获取所有的img元素
            var num = 0;  // 用来存储已加载的图片个数
            img.each(function(i) {  // 遍历所有图片
                var oImg = new Image();
                oImg.onload = function() { // onload 图片加载完成后执行
                    num++;
                    $(".pic p").html(parseInt(num / img.length * 100) + &#39;%&#39;);
                    if(num >= img.length) {
                        $(".loading").fadeOut(); // 页面加载完成后隐藏
                    }
                }
                oImg.src = img[i].src;
            })
        })
    </script>
</head>
<body>
    <div>
        <div>
            <span></span>
            <p>0%</p>
        </div>
    </div>
    <img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="">
    <img src="http://img12.3lian.com/gaoqing02/02/93/37.jpg" alt="">
    <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/c83d70cf3bc79f3d6e7bf85db8a1cd11738b29c0.jpg" alt="">
    <img src="http://big5.wallcoo.com/photograph/summer_feeling/images/%5Bwallcoo.com%5D_summer_feeling_234217.jpg" alt="">
    <img src="http://cdn.duitang.com/uploads/item/201409/08/20140908130732_kVXzh.jpeg" alt="">
    <img src="http://file02.16sucai.com/d/file/2014/1006/e94e4f70870be76a018dff428306c5a3.jpg" alt="">
    <img src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_sCd8j.gif" alt="">
    <img src="http://img.51ztzj.com/upload/image/20130417/201304172007_670x419.jpg" alt="">
    <img src="http://img0.imgtn.bdimg.com/it/u=1618007397,4183425847&fm=26&gp=0.jpg" alt="">
</body>
</html>
For more programming related knowledge, please visit:

Programming Video

! !

The above is the detailed content of A brief discussion on three ways to implement jQuery+CSS to implement front-end web page loading progress bar. For more information, please follow other related articles on the PHP Chinese website!

jquery css css3 html https
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Pure CSS to achieve left-right flipping effect of images (code attached)Next article：Pure CSS to achieve left-right flipping effect of images (code attached)

Related articles

See more