• 注册
  • 网络编程
  • 今日 0
  • 帖子 12
  • 关注 1
  • 热门论坛

  • 玩游戏赚钱
    玩游戏赚钱
    游戏赚钱版块,提供可以赚钱的网络游戏,专注于挖掘电脑端游与手游赚钱方法。欢迎关注和阅读游戏赚钱分类的精彩内容。
  • 商机发布交流
    商机发布交流
    本站为本站会员提供DNF商机倒卖囤货发布交流
  • 网赚项目
    网赚项目
    为您免费提供网赚项目、最新赚钱项目,不收取任何费用,只要您用心就能赚到钱!
    • 支付宝
    • QQ
    • 微信

    游赚笔记坚持一个资源共享的理念来供应大家学习游赚网赚,也因此,游赚笔记不能像其他站一样来获得收益。如果你不想让本站倒闭,可以选择充值金币或者开通会员,如果你什么都不需要,你也可以扫上面的二维码,直接支持游赚笔记!(注:捐款时,请备注捐助后面跟上用户名,例:捐助-游赚笔记)

    点我加入本站交流群

    BBS JavaScript 关注:1 内容:12

    javascript自定义加载loading效果

  • 查看作者
  • 打赏作者
  • 拉黑名单
  • 当前位置: 游赚笔记 > 网络编程 > JavaScript > 正文
    lv.25
    宇宙之主
    巴菲特

    本文实例为大家分享了javascript自定义加载loading效果的具体代码,供大家参考,具体内容如下

    加载中图片,底色为白色(看不到)

    javascript自定义加载loading效果

    效果如图:

    javascript自定义加载loading效果

    使用方法

    this.tool.showLoading('加载中', this)
    this.tool.showLoading('合成中', this)
    
    this.tool.hideLoading()

    引用文件

    在App.vue中

    <style scoped>
    @import './common.css';
    </style>

    在main.js中

    import tools from './tools'
    Vue.prototype.tool = tools

    tools.js

    export default {
     //显示加载框---使用方法,例如:this.tool.showLoading('正在加载',this,'1')
     showLoading (message, el, type) {
      var html = '';
      html += '<i class="mui-spinner mui-spinner-white"></i>';
      html += '<p class="text">' + (message || "数据加载中") + '</p>';
    
      //遮罩层
      var mask = document.getElementsByClassName("mui-show-loading-mask");
      if (mask.length == 0) {
       mask = document.createElement('div');
       mask.classList.add("mui-show-loading-mask");
       // console.log(type)
       // 自己添加内容...start
       if (type !== '2' && type) {
        var winHig = document.documentElement.clientHeight;
        if (el.$refs.nav) {
         var heightNav = el.$refs.nav.offsetHeight;
         var heightFix = el.$refs.fixed.offsetHeight;
         if (type === '1') {
          var loHig = winHig - heightNav - heightFix + 'px'
         } else {
          loHig = winHig - heightFix + 'px'
         }
         mask.style.top = heightFix + 'px'
         mask.style.height = loHig
        }
       }
       // 自己添加内容...End
       document.body.appendChild(mask);
       mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
      } else {
       mask[0].classList.remove("mui-show-loading-mask-hidden");
      }
      //加载框
      var toast = document.getElementsByClassName("mui-show-loading");
      if (toast.length == 0) {
       toast = document.createElement('div');
       toast.classList.add("mui-show-loading");
       toast.classList.add('loading-visible');
       document.body.appendChild(toast);
       toast.innerHTML = html;
       toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });
      } else {
       toast[0].innerHTML = html;
       toast[0].classList.add("loading-visible");
      }
     },
    
     //隐藏加载框----使用方法,例如:this.tool.hideLoading();
     hideLoading (callback) {
      var mask = document.getElementsByClassName("mui-show-loading-mask");
      var toast = document.getElementsByClassName("mui-show-loading");
      if (mask.length > 0) {
       mask[0].classList.add("mui-show-loading-mask-hidden");
      }
      if (toast.length > 0) {
       toast[0].classList.remove("loading-visible");
       callback && callback();
      }
    }

    common.css

    /*----------------mui.showLoading---------------*/
    .mui-show-loading {
     position: fixed;
     padding: 5px;
     width: 120px;
     min-height: 120px;
     top: 45%;
     left: 50%;
     margin-left: -60px;
     background: rgba(0, 0, 0, 0.6);
     text-align: center;
     border-radius: 5px;
     color: #FFFFFF;
     visibility: hidden;
     margin: 0;
     z-index: 2000;
    
     -webkit-transition-duration: .2s;
     transition-duration: .2s;
     opacity: 0;
     -webkit-transform: scale(0.9) translate(-50%, -50%);
     transform: scale(0.9) translate(-50%, -50%);
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
    }
    
    .mui-show-loading.loading-visible {
     opacity: 1;
     visibility: visible;
     -webkit-transform: scale(1) translate(-50%, -50%);
     transform: scale(1) translate(-50%, -50%);
    }
    
    .mui-show-loading .mui-spinner {
     margin-top: 24px;
     width: 36px;
     height: 36px;
    }
    
    .mui-show-loading .text {
     line-height: 1.6;
     font-family: -apple-system-font, "Helvetica Neue", sans-serif;
     font-size: 14px;
     margin: 10px 0 0;
     color: #fff;
    }
    
    .mui-show-loading-mask {
     position: fixed;
     z-index: 1000;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0);
    }
    
    .mui-show-loading-mask-hidden {
     display: none !important;
    }
    
    /*toast信息提示*/
    .mui-toast-container {
     top: 5% !important;
     width: auto;
     text-align: center;
    }
    
    .mui-toast-message {
     background: url(/app/themes/default/images/toast.png) no-repeat center 10px #000;
     background-color: rgba(0, 0, 0, .8);
     color: #fff;
     /* max-width: 90%; */
     display: inline-block;
     width: auto;
     margin: 0 auto;
     /* padding: 70px 5px 10px 5px; */
    }
    
    .mui-spinner-white:after {
     background-image: url(./assets/loding.png);
    }
    
    .mui-loading .mui-spinner {
     display: block;
    
     margin: 0 auto;
    }
    
    .mui-spinner {
     display: inline-block;
    
     width: 24px;
     height: 24px;
    
     -webkit-transform-origin: 50%;
     transform-origin: 50%;
     -webkit-animation: spinner-spin 1s step-end infinite;
     animation: spinner-spin 1s step-end infinite;
    }
    
    .mui-btn .mui-spinner {
     width: 14px;
     height: 14px;
    
     vertical-align: text-bottom;
    }
    
    .mui-btn-block .mui-spinner {
     width: 22px;
     height: 22px;
    }
    
    .mui-spinner:after {
     display: block;
    
     width: 100%;
     height: 100%;
    
     content: '';
     background-repeat: no-repeat;
     background-position: 50%;
     background-size: 100%;
    }
    
    
    @-webkit-keyframes spinner-spin {
     0% {
      -webkit-transform: rotate(0deg);
     }
    
     8.33333333% {
      -webkit-transform: rotate(30deg);
     }
    
     16.66666667% {
      -webkit-transform: rotate(60deg);
     }
    
     25% {
      -webkit-transform: rotate(90deg);
     }
    
     33.33333333% {
      -webkit-transform: rotate(120deg);
     }
    
     41.66666667% {
      -webkit-transform: rotate(150deg);
     }
    
     50% {
      -webkit-transform: rotate(180deg);
     }
    
     58.33333333% {
      -webkit-transform: rotate(210deg);
     }
    
     66.66666667% {
      -webkit-transform: rotate(240deg);
     }
    
     75% {
      -webkit-transform: rotate(270deg);
     }
    
     83.33333333% {
      -webkit-transform: rotate(300deg);
     }
    
     91.66666667% {
      -webkit-transform: rotate(330deg);
     }
    
     100% {
      -webkit-transform: rotate(360deg);
     }
    }
    
    @keyframes spinner-spin {
     0% {
      transform: rotate(0deg);
     }
    
     8.33333333% {
      transform: rotate(30deg);
     }
    
     16.66666667% {
      transform: rotate(60deg);
     }
    
     25% {
      transform: rotate(90deg);
     }
    
     33.33333333% {
      transform: rotate(120deg);
     }
    
     41.66666667% {
      transform: rotate(150deg);
     }
    
     50% {
      transform: rotate(180deg);
     }
    
     58.33333333% {
      transform: rotate(210deg);
     }
    
     66.66666667% {
      transform: rotate(240deg);
     }
    
     75% {
      transform: rotate(270deg);
     }
    
     83.33333333% {
      transform: rotate(300deg);
     }
    
     91.66666667% {
      transform: rotate(330deg);
     }
    
     100% {
      transform: rotate(360deg);
     }
    }

    以上就是本文的全部内容,希望对大家的学习有所帮助

    请登录之后再进行评论

    登录
  • 发表内容
  • QQ交流群DNF内部技术交流
  • 做任务
  • 实时动态
  • 返回顶部