zoukankan      html  css  js  c++  java
  • ajax加载时的进度条

    运行效果如下图,pc和移动都可以展示,调用方法很简单,开始调用:loading.baosight.showPageLoadingMsg(false),false代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),有两个文件,一个是js文件,一个是css文件.别忘记引入jquery.js哦.想了解更多的可以加qq群:106320003

    css文件

    #_loadMsg{
        display: inline-block;
        width: 100%;
        text-align: center;
        line-height: 45;
        padding-left: 20px;
        display : none;
    }
    
    #_loading_div {
         vertical-align: middle;
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        z-index: 3;
        line-height: 40;
        opacity: 0.5;
        display : none;
        background: #CCCCCC;
    }
    
    #_loading_div span {
        display: inline-block;
        width: 10px;
        height: 40px;
        animation-name: scale;
        -webkit-animation-name: scale;
        -moz-animation-name: scale;
        -ms-animation-name: scale;
        -o-animation-name: scale;
        animation-duration: 1.2s;
        -webkit-animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;
        -ms-animation-duration: 1.2s;
        -o-animation-duration: 1.2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
    }
    span.item-1 {
      background: #2ecc71;
    }
    span.item-2 {
      background: #3498db;
    }
    span.item-3 {
      background: #9b59b6;
    }
    span.item-4 {
      background: #e67e22;
    }
    span.item-5 {
      background: #c0392b;
    }
    span.item-6 {
      background: #e74c3c;
    }
    span.item-7 {
      background: #e74c8c;
    }
    
    .item-1 {
        animation-delay: -1s;
        -webkit-animation-delay: -1s;
        -moz-animation-delay: -1s;
        -ms-animation-delay: -1s;
        -o-animation-delay: -1s;
    }
    
    .item-2 {
        animation-delay: -0.9s;
        -webkit-animation-delay: -0.9s;
        -moz-animation-delay: -0.9s;
        -ms-animation-delay: -0.9s;
        -o-animation-delay: -0.9s;
    }
    
    .item-3 {
        animation-delay: -0.8s;
        -webkit-animation-delay: -0.8s;
        -moz-animation-delay: -0.8s;
        -ms-animation-delay: -0.8s;
        -o-animation-delay: -0.8s;
    }
    
    .item-4 {
        animation-delay: -0.7s;
        -webkit-animation-delay: -0.7s;
        -moz-animation-delay: -0.7s;
        -ms-animation-delay: -0.7s;
        -o-animation-delay: -0.7s;
    }
    
    .item-5 {
        animation-delay: -0.6s;
        -webkit-animation-delay: -0.6s;
        -moz-animation-delay: -0.6s;
        -ms-animation-delay: -0.6s;
        -o-animation-delay: -0.6s;
    }
    
    .item-6 {
        animation-delay: -0.5s;
        -webkit-animation-delay: -0.5s;
        -moz-animation-delay: -0.5s;
        -ms-animation-delay: -0.5s;
        -o-animation-delay: -0.5s;
    }
    
    .item-7 {
        animation-delay: -0.4s;
        -webkit-animation-delay: -0.4s;
        -moz-animation-delay: -0.4s;
        -ms-animation-delay: -0.4s;
        -o-animation-delay: -0.4s;
    }
    
    @-webkit-keyframes scale {
      0%, 40%, 100% {
        -moz-transform: scaleY(0.2);
        -ms-transform: scaleY(0.2);
        -o-transform: scaleY(0.2);
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
      }
    
      20%, 60% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
    @-moz-keyframes scale {
      0%, 40%, 100% {
        -moz-transform: scaleY(0.2);
        -ms-transform: scaleY(0.2);
        -o-transform: scaleY(0.2);
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
      }
    
      20%, 60% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
    @-ms-keyframes scale {
      0%, 40%, 100% {
        -moz-transform: scaleY(0.2);
        -ms-transform: scaleY(0.2);
        -o-transform: scaleY(0.2);
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
      }
    
      20%, 60% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
    @keyframes scale {
      0%, 40%, 100% {
        -moz-transform: scaleY(0.2);
        -ms-transform: scaleY(0.2);
        -o-transform: scaleY(0.2);
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
      }
    
      20%, 60% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }

    js文件

    var loading = {
            baosight : {
                showPageLoadingMsg : function(showMessage){
                    if($("#_loading_div").length == 0){
                        $("body").append('<div id="_loading_div"><span class="item-1"></span><span class="item-2"></span><span class="item-3"></span><span class="item-4"></span><span class="item-5"></span><span class="item-6"></span><span class="item-7"></span></div>');
                    }
                    if($("#_loadMsg").length == 0){
                        $("body").append('<div id="_loadMsg">正在加载,请稍候... ...</div>');
                    }
                    if(showMessage == true || showMessage == "true" ){
                        $("#_loadMsg").show();
                    }
                    $("#_loading_div").show();
                },
                hidePageLoadingMsg :function() {
                    $("#_loading_div").hide();
                    $("#_loadMsg").hide();
                }
            }
    }
  • 相关阅读:
    mysql常用基本命令
    mysql8.0.13下载与安装图文教程
    k8s ingress 增加跨域配置
    Jenkins 备份恢复插件 thinBackup 使用
    k8s HA master 节点宕机修复
    nginx 跨域问题解决
    mongodb 3.4.24 主从复制
    k8s 线上安装 jenkins并结合 jenkinsfile 实现 helm 自动化部署
    k8s helm 运用与自建helm仓库chartmuseum
    centos6 源码安装 unzip
  • 原文地址:https://www.cnblogs.com/wggWeb/p/4080994.html
Copyright © 2011-2022 走看看