web前端动态添加进度条

最新推荐文章于 2023-05-21 23:36:32 发布

ITPlus

最新推荐文章于 2023-05-21 23:36:32 发布

阅读量4.3k

点赞数 1

分类专栏： js 文章标签： web前端进度条

本文链接：https://blog.csdn.net/Jiang_Rong_Tao/article/details/78164583

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为了网络延迟加载或者为了防止提交后重复点击提交按钮，比较好的方式就是显示一个比较优雅的进度条

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .loading{
            width: 100%;
            height: 100%;
            background: #ffffff;
            opacity: 0.5;
            left: 0;
            top:0;
            position: fixed;
            z-index: 100;
        }
        .loading .pic{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            margin: auto;
            text-align: center;
            font-size: 20px;
            line-height: 100px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
          document.onreadystatechange=function () {
              if ("interactive"==document.readyState){
                  var ahtml="<div class='loading'> <div class='pic'> <img src='images/loading.svg' width='80px' height='80px' ><br/><b >"+jjj+"</b></div></div>" ;
                  $("body").append(ahtml);
              }else
              if ("complete"==document.readyState){
                 $(".loading").fadeOut(100);
              }
          };
    </script>
</head>
<body>
     <div>
         <img src="images/loading_1.png">
         <img src="images/loading_2.png">
         <img src="images/loading_3.png">
     </div>
</body>
</html>

可以自己调整css样式实现多种多样的进度条样式

可以将上面的js代码封装到common.js,可以在做网络请求的时候做相应的显隐操作

/**
 * 显示进度条
 * @param msg 进度条下面显示的内容
 */
function showLoading(msg) {
    var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ;
    $("body").append(ahtml);
}

/**
 * 隐藏进度条
 */
function hiddleLoading() {
    $(".loading").fadeOut(100);
}

loading.svg文件如下（css）：

<svg class="lds-spinner" width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(30 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(60 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(90 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(120 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(150 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(180 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(210 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(240 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(270 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(300 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
  </rect>
</g><g transform="rotate(330 50 50)">
  <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000">
    <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
  </rect>
</g></svg>

推荐一个找进度条资源的网站：https://preloaders.net/

ITPlus

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端动态添加进度条

为了网络延迟加载或者为了防止提交后重复点击提交按钮，比较好的方式就是显示一个比较优雅的进度条源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <style> *{ padding: 0;
复制链接

扫一扫