有多种选择的loading插件

一个页面loading小插件2

前些天写了一个loading的插件，点击查看,今天又写了一个，优点是可以进行loading样式的选择，有12种样式。
先贴出loading插件代码:

/**
 * @description 移动端的loading效果小插件，内置了12种loading效果
 * @description 使用demo：var mask = new JLoading();
 *                        mask.init('loader-03');
 *                        mask.show(); 显示
 *                        mask.hide(); 隐藏
 */
function JLoading() {
  this.loaderStr = 'loader-01,loader-02,loader-03,loader-04,loader-05,loader-06,loader-07,loader-08,loader-09,loader-10,loader-11,loader-12'
  this.type = '';
}
JLoading.prototype.init = function(type) {
  if(this.loaderStr.split(',').indexOf(type) < 0) {
    this.type = 'loader-01';
  } else {
    this.type = type;
  }
  this.loadIndex = this.type.slice(-2);
  var nBody = document.body,
      nHead = document.head;
  var nStyle = document.createElement('style'), 
      nMask = document.createElement('div'),
      nLoader = document.createElement('div');
  nMask.setAttribute('id', 'JLoading-mask-'+this.loadIndex);
  nLoader.setAttribute('class', this.type);
  nMask.appendChild(nLoader);
  nBody.appendChild(nMask);
  nStyle.innerHTML = `[id*="JLoading-mask"]{display:none;width:100%;height:100%;height:100vh;background-color:rgba(0,0,0,.8)}[class*="loader-"]{position:absolute;display:inline-block;width:10%;padding-top:10%;color:#fff;vertical-align:middle;pointer-events:none;left:45%;top:45%}.loader-01{border:5px dotted currentcolor;border-radius:50%;-webkit-animation:1s loader-01 linear infinite;animation:1s loader-01 linear infinite}@-webkit-keyframes loader-01{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-01{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loader-02{border:5px solid transparent;border-left-color:currentcolor;border-right-color:currentcolor;border-radius:50%;-webkit-animation:1s loader-02 linear infinite;animation:1s loader-02 linear infinite}@-webkit-keyframes loader-02{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-02{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loader-03{border:2px solid currentcolor;border-bottom-color:transparent;border-radius:50%;-webkit-animation:1s loader-03 linear infinite;animation:1s loader-03 linear infinite;position:relative}@-webkit-keyframes loader-03{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-03{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loader-04{border:1px solid currentcolor;border-radius:50%;-webkit-animation:1s loader-04 linear infinite;animation:1s loader-04 linear infinite;position:relative}.loader-04:before{content:'';display:block;width:0;height:0;position:absolute;top:-3px;left:50%;border:3px solid currentcolor;border-radius:50%}@-webkit-keyframes loader-04{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-04{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loader-05{border:5px solid transparent;border-top-color:currentcolor;border-radius:50%;-webkit-animation:1s loader-05 linear infinite;animation:1s loader-05 linear infinite;position:relative}.loader-05:before{content:'';display:block;width:inherit;height:inherit;position:absolute;top:-5px;left:-5px;border:5px solid currentcolor;border-radius:50%;opacity:.5;width:100%;padding-top:100%}@-webkit-keyframes loader-05{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-05{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loader-06{border:5px solid currentcolor;border-radius:50%;-webkit-animation:loader-06 1s ease-out infinite;animation:loader-06 1s ease-out infinite}@-webkit-keyframes loader-06{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes loader-06{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.loader-07{border:0 solid transparent;border-radius:50%;position:relative}.loader-07:before,.loader-07:after{content:'';border:5px solid currentcolor;border-radius:50%;width:inherit;height:inherit;position:absolute;top:0;left:0;-webkit-animation:loader-07 1s linear infinite;animation:loader-07 1s linear infinite;opacity:0;width:100%;height:100%}.loader-07:before{-webkit-animation-delay:1s;animation-delay:1s}.loader-07:after{-webkit-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes loader-07{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes loader-07{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.loader-08{position:relative}.loader-08:before,.loader-08:after{content:'';width:inherit;height:inherit;border-radius:50%;background-color:currentcolor;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:loader-08 2.0s infinite ease-in-out;animation:loader-08 2.0s infinite ease-in-out;width:100%;height:100%}.loader-08:after{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes loader-08{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes loader-08{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}
    }.loader-09{background-color:currentcolor;border-radius:50%;-webkit-animation:loader-09 1.0s infinite ease-in-out;animation:loader-09 1.0s infinite ease-in-out}@-webkit-keyframes loader-09{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes loader-09{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.loader-10{position:relative;-webkit-animation:loader-10-1 2.0s infinite linear;animation:loader-10-1 2.0s infinite linear}.loader-10:before,.loader-10:after{content:'';width:0!important;height:0!important;border:15px solid currentcolor;display:block;position:absolute;border-radius:100%;-webkit-animation:loader-10-2 2s infinite ease-in-out;animation:loader-10-2 2s infinite ease-in-out}.loader-10:before{top:0;left:50%}.loader-10:after{bottom:0;right:50%;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes loader-10-1{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-10-1{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loader-10-2{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes loader-10-2{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}.loader-11{background-color:currentcolor;-webkit-animation:loader-11 1.2s infinite ease-in-out;animation:loader-11 1.2s infinite ease-in-out}@-webkit-keyframes loader-11{0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg);transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}@keyframes loader-11{0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg);transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.loader-12{position:relative}.loader-12:before,.loader-12:after{content:'';display:block;position:absolute;background-color:currentcolor;left:50%;right:0;top:0;bottom:50%;box-shadow:-.5em 0 0 currentcolor;-webkit-animation:loader-12 1s linear infinite;animation:loader-12 1s linear infinite}.loader-12:after{top:50%;bottom:0;-webkit-animation-delay:.25s;animation-delay:.25s}@-webkit-keyframes loader-12{0%,100%{box-shadow:-20px 0 0 transparent;background-color:currentcolor}50%{box-shadow:-20px 0 0 currentcolor;background-color:transparent}}@keyframes loader-12{0%,100%{box-shadow:-20px 0 0 transparent;background-color:currentcolor}50%{box-shadow:-20px 0 0 currentcolor;background-color:transparent}}`;
  nHead.appendChild(nStyle);   
}
JLoading.prototype.show = function() {
  var nMask = document.getElementById('JLoading-mask-'+this.loadIndex);
  nMask.style.display = 'block';
}
JLoading.prototype.hide = function() {
  var nMask = document.getElementById('JLoading-mask-'+this.loadIndex);
  nMask.style.display = 'none';
}

使用见下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><loading-test></loading-test></title>
  <script src="./loading-plug.js"></script>
</head>
<body>
  <script>
    var mask1 = new JLoading();
    mask1.init('loader-12');
    setTimeout(() => {
        mask1.show();
    }, 1000);
    setTimeout(() => {
        mask1.hide();
    }, 3000);
  </script>
</body>
</html>

使用不同的样式，需要在mask1.init(‘loader-12’)方法中传入名字，比如’loader-02’,具体的样式名字见下图: