jQuery 页面加载进度条 CSS3 动画loading

常见的定时器方案，也是俗称的障眼法，这里就不做演示了。

loading.io 是一种轻量级loading icon，它允许人们使用易读易写的css格式编写css3动画，然后转换成格式丰富的HTML页面。 —— [ 官方网站 ]

autoprefixer.github.io 是CSS3 兼容现代浏览器的现成方案。 —— [ 官方网站 ]

document 加载事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3进度条</title>
    <style>
      .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #fff;
      }
      .loading .pic {
        height: 50px;
        width: 50px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .loading .pic i {
        float: left;
        display: block;
        width: 6px;
        height: 50px;
        margin: 0 2px;
        background-color: green;
        -webkit-transform: scaleY(0.4);
        -ms-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-animation: load 1.2s infinite;
        animation: load 1.2s infinite;
      }
      .loading .pic i:nth-child(2) {
        -webkit-animation-delay: .1s;
        animation-delay: .1s;
      }
      .loading .pic i:nth-child(3) {
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
      }
      .loading .pic i:nth-child(4) {
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
      }
      .loading .pic i:nth-child(5) {
        -webkit-animation-delay: .4s;
        animation-delay: .4s;
      }
      @-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 type="text/javascript" src="js/jquery.js"></script>
    <script>
      document.onreadystatechange = function () {
        if (document.readyState == "complete") {
          $(".loading").fadeOut();
        }
      }
    </script>
  </head>
  <body>
    <div class="loading">
      <div class="pic">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468471&di=b5ead60ae9d545764943f7cd38b5799d&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fcrop%253D0%252C0%252C1024%252C704%2Fsign%3D3ac7b695f81fbe090811995456502003%2F4b90f603738da977781e0fc8ba51f8198618e324.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468471&di=fed86989869794b3908c562696985535&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd000baa1cd11728b80864d73c3fcc3cec3fd2c3c.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468472&di=bbbea908e946fed3bd94859b05bdcdde&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa8ec8a13632762d039d8c55caaec08fa503dc66b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=72c287af1dba222c2888c8f44447cfe9&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa2cc7cd98d1001e9da53afebb20e7bec55e797e3.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238790517&di=5c436c6e11a4d8d7a41db303853fff35&imgtype=0&src=http%3A%2F%2Fwww.pconline.com.cn%2Fgames%2Fcartoon%2Fphoto%2F10304%2Fpic%2F19ling01.jpg" />
  </body>
</html>

里面有CSS3 动画可以参考学习

进度条方案

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>固定在头部的进度条</title>
    <style>
      .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #fff;
      }
      .loading .pic {
        height: 4px;
        width: 0%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: green;
      }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
  </head>
  <body>
    <div class="loading">
      <div class="pic"></div>
    </div>
    <header>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468471&di=b5ead60ae9d545764943f7cd38b5799d&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fcrop%253D0%252C0%252C1024%252C704%2Fsign%3D3ac7b695f81fbe090811995456502003%2F4b90f603738da977781e0fc8ba51f8198618e324.jpg" />
    </header>
    <script>
      $(".loading .pic").animate({
        width: "20%"
      }, 100);
    </script>

    <section class="one">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468471&di=fed86989869794b3908c562696985535&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd000baa1cd11728b80864d73c3fcc3cec3fd2c3c.jpg" />
    </section>
    <script>
      $(".loading .pic").animate({
        width: "40%"
      }, 100);
    </script>

    <section class="two">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468472&di=bbbea908e946fed3bd94859b05bdcdde&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa8ec8a13632762d039d8c55caaec08fa503dc66b.jpg" />
    </section>
    <script>
      $(".loading .pic").animate({
        width: "60%"
      }, 100);
    </script>

    <section class="three">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=72c287af1dba222c2888c8f44447cfe9&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa2cc7cd98d1001e9da53afebb20e7bec55e797e3.jpg" />
    </section>
    <script>
      $(".loading .pic").animate({
        width: "80%"
      }, 100);
    </script>

    <section class="four">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
    </section>
    <script>
      $(".loading .pic").animate({
        width: "90%"
      }, 100);
    </script>

    <footer>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238790517&di=5c436c6e11a4d8d7a41db303853fff35&imgtype=0&src=http%3A%2F%2Fwww.pconline.com.cn%2Fgames%2Fcartoon%2Fphoto%2F10304%2Fpic%2F19ling01.jpg" />
    </footer>
    <script>
      $(".loading .pic").animate({
        width: "100%"
      }, 100, function () {
        $(".loading").fadeOut();
      });
    </script>
  </body>
</html>

检测资源动态加载

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>实时监测加载的进度条</title>
    <style>
      .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #fff;
      }
      .loading .pic {
        height: 100px;
        width: 100px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        font-size: 20px;
        line-height: 100px;
        text-align: center;
      }
      .loading .pic span {
        display: block;
        height: 80px;
        width: 80px;
        position: absolute;
        top: 10px;
        left: 10px;
        border-radius: 50%;
        -webkit-box-shadow: 0 3px 0 #666;
        box-shadow: 0 3px 0 #666;
        -webkit-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
      }
      @-webkit-keyframes rotate {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes rotate {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
      $(function () {
        //获得img元素
        var img = $("img");
        var num = 0;
        //遍历img
        img.each(function (i) {
          //创建img对象
          var oImg = new Image();
          //监测img对象的加载过程
          oImg.onload = function () {
            oImg.onload = null;
            num++;
            $(".loading b").html(parseInt(num / $("img").size() * 100) + "%");
            if (num >= i) {
              $(".loading").fadeOut();
            }
          }
          //设置img对象的图片地址
          oImg.src = img[i].src;
        })
      })
    </script>
  </head>
  <body>
    <div class="loading">
      <div class="pic">
        <span></span>
        <b>0%</b>
      </div>
    </div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468471&di=b5ead60ae9d545764943f7cd38b5799d&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fcrop%253D0%252C0%252C1024%252C704%2Fsign%3D3ac7b695f81fbe090811995456502003%2F4b90f603738da977781e0fc8ba51f8198618e324.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468471&di=fed86989869794b3908c562696985535&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd000baa1cd11728b80864d73c3fcc3cec3fd2c3c.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468472&di=bbbea908e946fed3bd94859b05bdcdde&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa8ec8a13632762d039d8c55caaec08fa503dc66b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=72c287af1dba222c2888c8f44447cfe9&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa2cc7cd98d1001e9da53afebb20e7bec55e797e3.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511238468477&di=bdc25c83dec8952688648865cefc5979&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff7246b600c3387446383a29f5b0fd9f9d62aa08b.jpg" />
  </body>
</html>

重点内容

推荐使用 document 事件方案，最后一种案例有缺点，如果是视频网站就会出现bug，当然是为了让大家看的更明白一些，里面很好的CSS3 动画制作，推荐给大家学习。

jQuery 页面加载进度条 CSS3 动画loading

猜你喜欢