使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏

原创

阿峰技术博客

发布于 2022-10-30 12:28:21

2.8K0

发布于 2022-10-30 12:28:21

文章被收录于专栏：WordPress技巧WordPress技巧

网页使用loading可以给用户带来更好的体验，避免网页渲染中长时间出现网页整体空白从而影响访客的体验，loading在部分大型APP也有在应用。

下面使用HTML+CSS+JS实现完整的Loading效果。

请先引入jQuery，因为JS定时隐藏依赖jq。

1.HTML

<div class="loaderbg">
    <div class="spinner">
        <div class="double rect1"></div>
        <div class="double rect2"></div>
        <div class="double rect3"></div>
        <div class="double rect4"></div>
        <div class="double rect5"></div>
    </div>
</div>

loaderbg类为loading的背景色，为白色。

2.CSS

.loaderbg {
    background-color: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999
}

::-webkit-scrollbar {
    width: 7.5px;
    height: 6px;
    background-color: #f0f0f0;
    display: none
}

::-webkit-scrollbar-thumb {
    background-color: #b1b1b1;
    border-radius: 15px
}

::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -30px;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px
}

.spinner>.double {
    background: #49a9ee;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
    animation: stretchDelay 1.2s infinite ease-in-out
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s
}

@-webkit-keyframes stretchDelay {

    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4)
    }

    20% {
        -webkit-transform: scaleY(1)
    }
}

@keyframes stretchDelay {

    0%,
    40%,
    100% {
        transform: scaleY(.4);
        -webkit-transform: scaleY(.4)
    }

    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1)
    }
}

3.JS

js在这里的作用为定时或网页加载完成后关闭loaderbg类

//页面加载完成之后隐藏loading
$(window).load(function () {
    $(".loaderbg").hide();
});

//设置页面加载3秒之后隐藏loading
/*$(function () {
    setTimeout(function () {
        $(".loaderbg").hide();
        alert("页面加载完成啦！");
    },3000);
})*/

第一种方法是等待网页全部加载完成后再隐藏loading，但同时如果网页其他资源文件加载缓慢（如图片等），loading也会随之存在更长时间。

第二中方法是设置定时隐藏loading，可以根据实际需求更改隐藏时间，默认为3s。

建议实际使用时，删除 alert("页面加载完成啦！"); 避免引起用户反感，只做效果测试。

以上第一种方法jquery低版本测试正常，高版本可能会报错：ncaught TypeError: a.indexOf is not a function at r.fn.load

原因是在jQuery 3.x 中取消了 load()，将 $(window).load(function () { 替换为 $(window).on('load',function(){ 即可，如：

$(window).on('load',function(){
        $(".loaderbg").hide();
    });

同时考虑到如果用户的浏览器侧不支持JavaScript或者JavaScript被禁用，需要使用noscript标签，添加display:none属性即可，noscript只会在浏览器环境不支持JS或者JS被禁用才会执行

<noscript>
    <style>
        .loaderbg {
            display: none;
        }
    </style>
</noscript>

4.实例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏_阿峰博客</title>
  <script src="https://libs.afengim.com/libs/jquery-3.1.1/jquery-3.1.1.min.js" type="application/javascript"></script>
  <style>
    .loaderbg {
      background-color: #fff;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99999999
    }

    ::-webkit-scrollbar {
      width: 7.5px;
      height: 6px;
      background-color: #f0f0f0;
      display: none
    }

    ::-webkit-scrollbar-thumb {
      background-color: #b1b1b1;
      border-radius: 15px
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: #777
    }

    .spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -30px;
      width: 50px;
      height: 60px;
      text-align: center;
      font-size: 10px
    }

    .spinner > .double {
      background: #49a9ee;
      height: 100%;
      width: 6px;
      display: inline-block;
      -webkit-animation: stretchDelay 1.2s infinite ease-in-out;
      animation: stretchDelay 1.2s infinite ease-in-out
    }

    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s
    }

    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s
    }

    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s
    }

    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s
    }

    @-webkit-keyframes stretchDelay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(.4)
      }

      20% {
        -webkit-transform: scaleY(1)
      }
    }

    @keyframes stretchDelay {

      0%,
      40%,
      100% {
        transform: scaleY(.4);
        -webkit-transform: scaleY(.4)
      }

      20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1)
      }
    }
  </style>
</head>
<body>
<!--html-->
<div class="loaderbg">
  <div class="spinner">
    <div class="double rect1"></div>
    <div class="double rect2"></div>
    <div class="double rect3"></div>
    <div class="double rect4"></div>
    <div class="double rect5"></div>
  </div>
</div>
<!--end-->
<p>
  <a href="https://www.afengblog.com/website-loading.html" target="_blank"><strong>使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏，地址：https://www.afengblog.com/website-loading.html</strong></a>
</p>
<!--noscript-->
<noscript>
  <style>
    .loaderbg {
      display: none;
    }
  </style>
</noscript>
<!--end-->
<!--script-->
<script type="text/javascript">
  //页面加载完成之后隐藏loading
  /*$(window).load(function () {
    $(".loaderbg").hide();
  });*/
  //设置页面加载3秒之后隐藏loading
  $(function () {
    setTimeout(function () {
      $(".loaderbg").hide();
      alert("页面加载完成啦！");
    }, 3000);
  })
</script>
<!--end-->
</body>
</html>

Demo地址：https://tools.afengim.com/demo/loading/loading-1/

原文地址：https://www.afengblog.com/website-loading.html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html