css loading

作者: zhuyx0304 | 来源:发表于2024-03-18 09:43 被阅读0次

在vue中使用loading组件 CSS3实现loading效果
CSS3 loading加载动画
css loading
css loading
Facebook loading animation using
CSS 加载
CSS Loading 纯css
[CSS][loading]彩虹loading特效
Ajax Loading Style
记在js中判断css是否加载完成（模拟onload）

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css loading</title>
    <link rel="stylesheet" href="./loading.css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>Loaders Kit</h1>
      <h2 class="cf">Single Element pure CSS Spinners &amp; Loaders</h2>
      <div class="row cf">
        <div class="span">
          <div class="timer"></div>
        </div>
        <div class="span">
          <div class="typing_loader"></div>
        </div>
        <div class="span">
          <div class="location_indicator"></div>
        </div>
        <div class="span">
          <div class="dashboard"></div>
        </div>
      </div>

      <div class="row cf">
        <div class="span">
          <div class="battery"></div>
        </div>
        <div class="span">
          <div class="magnifier"></div>
        </div>
        <div class="span">
          <div class="help"></div>
        </div>
        <div class="span">
          <div class="cloud"></div>
        </div>
      </div>

      <div class="row cf">
        <div class="span">
          <div class="eye"></div>
        </div>
        <div class="span">
          <div class="coffee_cup"></div>
        </div>
        <div class="span">
          <div class="square"></div>
        </div>
        <div class="span">
          <div class="circle"></div>
        </div>
      </div>
    </div>
  </body>
</html>

css

*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

html{
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #59488b;
}
h1,h2{
  color: rgba(255,255,255,0.5);
  font-size: 40px;
  font-weight: 200;
  text-align: center;
  margin: 40px 0 0 0;
}
h2{
  font-size: 18px;
  margin: 0;
  padding: 0;
  margin: 10px 0;
}
h1 span{
  font-size: 30px;
}

a{
  text-decoration: none;
}
a:hover{
  transition: all linear 0.2s;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}


.wrapper{
  width: 700px;
  margin: 0 auto;
}
.row{
  text-align: center;
  padding: 50px 0;
}
.span, .span_large{
  float: left;
  width: 100px;
  background-color: rgba(0,0,0, 0.02);
  height: 100px;
  vertical-align: middle;
  border-radius: 1px;
  margin-right: 100px;
}
.span:last-child{
  margin-right: 0px;
}

/* Timer*/
.timer{
  width: 24px;
  height: 24px;
  background-color: transparent;
  box-shadow: inset 0px 0px 0px 2px #fff;
  border-radius: 50%;
  position: relative;
  margin: 38px auto;/* Not necessary- its only for layouting*/    
}
.timer:after, .timer:before{
  position: absolute;
  content:"";
  background-color: #fff;
}
.timer:after{
  width: 10px;
  height: 2px;
  top: 11px;
  left: 11px;
  -webkit-transform-origin: 1px 1px;
     -moz-transform-origin: 1px 1px;
          transform-origin: 1px 1px;
  -webkit-animation: minhand 2s linear infinite;
     -moz-animation: minhand 2s linear infinite;
          animation: minhand 2s linear infinite;
}

.timer:before{
  width: 8px;
  height: 2px;
  top: 11px;
  left: 11px;
  -webkit-transform-origin: 1px 1px;
     -moz-transform-origin: 1px 1px;
          transform-origin: 1px 1px;
  -webkit-animation: hrhand 8s linear infinite;
     -moz-animation: hrhand 8s linear infinite;
          animation: hrhand 8s linear infinite;
}

@-webkit-keyframes minhand{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
  0%{-moz-transform:rotate(0deg)}
  100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
  0%{-moz-transform:rotate(0deg)}
  100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/*Typing Loader*/
.typing_loader{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
     -moz-animation: Typing 1s linear infinite alternate;
          animation: typing 1s linear infinite alternate;
  margin: 46px auto; /* Not necessary- its only for layouting*/  
  position: relative;
  left: -12px;
}
@-webkit-keyframes typing{
  0%{
      background-color: rgba(255,255,255, 1);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                  24px 0px 0px 0px rgba(255,255,255,0.2);
    }
  25%{ 
      background-color: rgba(255,255,255, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                  24px 0px 0px 0px rgba(255,255,255,0.2);
  }
  75%{ background-color: rgba(255,255,255, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                  24px 0px 0px 0px rgba(255,255,255,1);
    }
}

@-moz-keyframes typing{
 0%{
      background-color: rgba(255,255,255, 1);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                  24px 0px 0px 0px rgba(255,255,255,0.2);
    }
  25%{ 
      background-color: rgba(255,255,255, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                  24px 0px 0px 0px rgba(255,255,255,0.2);
  }
  75%{ background-color: rgba(255,255,255, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                  24px 0px 0px 0px rgba(255,255,255,1);
    }
}

@keyframes typing{
 0%{
      background-color: rgba(255,255,255, 1);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                  24px 0px 0px 0px rgba(255,255,255,0.2);
    }
  25%{ 
      background-color: rgba(255,255,255, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                  24px 0px 0px 0px rgba(255,255,255,0.2);
  }
  75%{ background-color: rgba(255,255,255, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                  24px 0px 0px 0px rgba(255,255,255,1);
    }
}

/*Location indicator */
.location_indicator{
  margin: 30px auto;
  position: relative;
  left: -9px;
}

.location_indicator:before, .location_indicator:after{
  position: absolute;
  content: "";
}

.location_indicator:before{
  width: 20px;
  height: 20px;
  border-radius: 100% 100% 100% 0;
  box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
  -webkit-animation: mapping 1s linear infinite;
     -moz-animation: mapping 1s linear infinite;
          animation: mapping 1s linear infinite;
  -webkit-transform: rotate(-46deg);
     -moz-transform: rotate(-46deg);
          transform: rotate(-46deg);

}

.location_indicator:after{
  width: 30px;
  height: 10px;
  border-radius: 100%;
  left: 44px;
  background-color: rgba(255, 255, 255, 0.2);
  top: 24px;
  z-index: -1;
}

@-webkit-keyframes mapping{
  0% {top: 0;}
  50%{top: -5px;}
  100% {top:0; }
}
@-moz-keyframes mapping{
  0% {top: 0;}
  50%{top: -5px;}
  100% {top:0; }
}
@-keyframes mapping{
  0% {top: 0;}
  50%{top: -5px;}
  100% {top:0; }
}

/* go in*/
.dashboard{
  width: 32px;
  height: 32px;
  margin: 30px auto;
  border: 2px rgba(255,255,255,1) solid;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.dashboard:after, .dashboard:before{
  position: absolute;
  content: "";
}
.dashboard:after{
  width:14px;
  height: 2px;
  top: 20px;
  -webkit-transform-origin: 1px 1px;
     -moz-transform-origin: 1px 1px;
          transform-origin: 1px 1px;
  background-color: rgba(255,255,255,1);
  -webkit-animation: dashboard_hand 2s linear infinite alternate;
     -moz-animation: dashboard_hand 2s linear infinite alternate;
          animation: dashboard_hand 2s linear infinite alternate;
}
.dashboard:before{
  width: 32px;
  height: 10px;
  background-color: rgba(255,255,255,1);
  top:20px;
  left: -2px;
}
@-webkit-keyframes dashboard_hand{
  0%{ -webkit-transform: rotate(-160deg);}
  100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
  0%{ -moz-transform: rotate(-160deg);}
  100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
  0%{ transform: rotate(-160deg);}
  100%{ transform: rotate(-20deg);}
}

/*Battery*/
.battery{
  width: 28px;
  height: 14px;
  border: 1px #fff solid;
  border-radius: 2px;
  position: relative;
  -webkit-animation: charge 5s linear infinite;
     -moz-animation: charge 5s linear infinite;
          animation: charge 5s linear infinite;
  top: 40px;
  margin: 0 auto;
}
.battery:after{
  width: 2px;
  height: 7px;
  background-color: #fff;
  border-radius: 0px 1px 1px 0px;
  position: absolute;
  content: "";
  top: 2px;
  right: -4px;
}
@-webkit-keyframes charge{
  0%{box-shadow: inset 0px 0px 0px #fff;}
  100%{box-shadow: inset 30px 0px 0px #fff;}
}
@-moz-keyframes charge{
  0%{box-shadow: inset 0px 0px 0px #fff;}
  100%{box-shadow: inset 30px 0px 0px #fff;}
}
@keyframes charge{
  0%{box-shadow: inset 0px 0px 0px #fff;}
  100%{box-shadow: inset 30px 0px 0px #fff;}
}

.magnifier{
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px 0px 1px #fff;
  border-radius: 50%;
  position: relative;
  margin: 34px auto;
  -webkit-animation: magnify 1s linear infinite alternate;
     -moz-animation: magnify 1s linear infinite alternate;
          animation: magnify 1s linear infinite alternate;
}
.magnifier:after, .magnifier:before{
  position: absolute;
  content: "";
}
.magnifier:before{
  content: "me";
  font-size: 12px;
  left: 2px;
  text-align: center;
  top: 2px;
}
.magnifier:after{
  width: 2px;
  height: 8px;
  background-color: #fff;
  bottom: -6px;
  left: 20px;
  border-radius: 2px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@-webkit-keyframes magnify{
  0%{-webkit-transform: scale(1); }
  100%{-webkit-transform: scale(1.5);}
}
@-moz-keyframes magnify{
  0%{-moz-transform: scale(1); }
  100%{-moz-transform: scale(1.5);}
}
@keyframes magnify{
  0%{transform: scale(1); }
  100%{transform: scale(1.5);}
}

/*help*/
.help{
  width: 30px;
  height: 30px;
  border: 1px #fff solid;
  border-radius: 50%;
  -webkit-animation: rotation 1s ease-in-out infinite;
     -moz-animation: rotation 1s ease-in-out infinite;
          animation: rotation 1s ease-in-out infinite;
  margin: 30px auto;
}
.help:after{
  width: 5px;
  height: 5px;
  background-color: rgba(255,255,255,1);
  border-radius: 100%;
  position: absolute;
  content: "";
}
@-webkit-keyframes rotation{
  0%{-webkit-transform: rotate(0deg);}
  100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
  0%{-moz-transform: rotate(0deg);}
  100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

/*eye ball*/
.eye{
  width: 20px;
  height: 20px;
  background-color: rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 30px 0px 0px 0px rgba(255,255,255,0.8);
  position: relative;
  margin: 36px 26px;
}

.eye:after{
  background-color: #59488b;
  width: 10px;
  height: 10px;
  box-shadow: 30px 0px 0px 0px #59488b;
  border-radius: 50%;
  left: 9px;
  top: 8px;
  position: absolute;
  content: "";
  -webkit-animation: eyeball 2s linear infinite alternate;
     -moz-animation: eyeball 2s linear infinite alternate;
          animation: eyeball 2s linear infinite alternate;
}
@-webkit-keyframes eyeball{
  0%{left: 9px;}
  100%{left: 1px;}
}
@-moz-keyframes eyeball{
  0%{left: 9px;}
  100%{left: 1px;}
}
@keyframes eyeball{
  0%{left: 9px;}
  100%{left: 1px;}
}

/*coffee cup*/
.coffee_cup{
  width: 20px;
  height: 24px;
  border: 1px rgba(255,255,255,1) solid;
  border-radius: 0px 0px 5px 5px;
  position: relative;
  margin: 36px auto;
}
.coffee_cup:after, .coffee_cup:before{
  position: absolute;
  content: "";
}
.coffee_cup:after{
  width: 5px;
  height: 12px;
  border: 1px #fff solid;
  border-left: none;
  border-radius: 0px 20px 20px 0px;
  left: 20px;
}
.coffee_cup:before{
  width: 1px;
  height: 6px;
  background-color: rgba(255,255,255,1);
  top: -10px;
  left: 4px;
  box-shadow: 5px 0px 0px 0px rgba(255,255,255,1),
              5px -5px 0px 0px rgba(255,255,255,1),
              10px 0px 0px 0px rgba(255,255,255,1);
  -webkit-animation: steam 1s linear infinite alternate;
     -moz-animation: steam 1s linear infinite alternate;
          animation: steam 1s linear infinite alternate;
}

@-webkit-keyframes steam{
  0%{height: 0px;}
  100%{height: 6px;}            
}
@-moz-keyframes steam{
  0%{height: 0px}
  100%{height: 6px;}            
}
@keyframes steam{
  0%{height: 0px}
  100%{height: 6px;}            
}

/*square*/
.square{
  width: 20px;
  height: 20px;
  border:1px  rgba(255,255,255,1) solid;
  margin: 36px auto;
  position: relative;
  -webkit-animation: fill_color 5s linear infinite;
     -moz-animation: fill_color 5s linear infinite;
          animation: fill_color 5s linear infinite;
}
.square:after{
  width: 4px;
  height: 4px;
  position: absolute;
  content: "";
  background-color: rgba(255,255,255,1);
  top: -8px;
  left: 0px;
  -webkit-animation: square_check 1s ease-in-out infinite;
     -moz-animation: square_check 1s ease-in-out infinite;
          animation: square_check 1s ease-in-out infinite;
}

@-webkit-keyframes square_check{
  25%{ left: 22px; top: -8px;}
  50%{ left: 22px; top: 22px;}
  75%{ left: -9px; top: 22px;}
  100%{ left: -9px; top: -7px;}
}
@-moz-keyframes square_check{
  25%{ left: 22px; top: -8px;}
  50%{ left: 22px; top: 22px;}
  75%{ left: -9px; top: 22px;}
  100%{ left: -9px; top: -7px;}
}
@keyframes square_check{
  25%{ left: 22px; top: -8px;}
  50%{ left: 22px; top: 22px;}
  75%{ left: -9px; top: 22px;}
  100%{ left: -9px; top: -7px;}
}
@-webkit-keyframes fill_color{
  0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
  100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@-moz-keyframes fill_color{
  0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
  100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@keyframes fill_color{
  0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
  100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
/*circle classick*/
.circle{
  margin: 40px auto;
  position: relative;
  width: 8px;
  height: 8px;
  background-color: rgba(255,255,255,.5);;
  box-shadow: -14px 0px 0px rgba(255,255,255,1);
  border-radius: 50%;
  -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
     -moz-animation: circle_classic 1s ease-in-out infinite alternate;
          animation: circle_classic 1s ease-in-out infinite alternate;
}

@-webkit-keyframes circle_classic{
  0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
 100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);}   
}
@-moz-keyframes circle_classic{
  0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
 100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);}   
}
@keyframes circle_classic{
  0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
 100%{opacity: 1; transform: rotate(360deg) scale(1.2);}   
}

/*cloud*/

.cloud{
  margin: 42px 30px;
  width: 4px;
  height: 10px;
  opacity: 0.5;
  position: relative;
  box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
              12px 0px 0px 0px rgba(255,255,255,1),
              18px 0px 0px 0px rgba(255,255,255,1),
              24px 0px 0px 0px rgba(255,255,255,1),
              30px 0px 0px 0px rgba(255,255,255,1),
              36px 0px 0px 0px rgba(255,255,255,1);
  
  -webkit-animation: rain 1s linear infinite alternate;
     -moz-animation: rain 1s linear infinite alternate;
          animation: rain 1s linear infinite alternate;
}
.cloud:after{
  width: 40px;
  height: 10px;
  position: absolute;
  content: "";
  background-color: rgba(255,255,255,1);
  top: 0px;
  opacity: 1;
  -webkit-animation: line_flow 2s linear infinite reverse;
     -moz-animation: line_flow 2s linear infinite reverse;
          animation: line_flow 2s linear infinite reverse;
}

@-webkit-keyframes rain{
  0%{
   box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
              12px 0px 0px 0px rgba(255,255,255,0.9),
              18px 0px 0px 0px rgba(255,255,255,0.7),
              24px 0px 0px 0px rgba(255,255,255,0.6),
              30px 0px 0px 0px rgba(255,255,255,0.3),
              36px 0px 0px 0px rgba(255,255,255,0.2);
  }
  100%{
  box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
              12px 0px 0px 0px rgba(255,255,255,0.3),
              18px 0px 0px 0px rgba(255,255,255,0.6),
              24px 0px 0px 0px rgba(255,255,255,0.7),
              30px 0px 0px 0px rgba(255,255,255,0.9),
              36px 0px 0px 0px rgba(255,255,255,1);
      opacity: 1;
  }
}
@-moz-keyframes rain{
  0%{
   box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
              12px 0px 0px 0px rgba(255,255,255,0.9),
              18px 0px 0px 0px rgba(255,255,255,0.7),
              24px 0px 0px 0px rgba(255,255,255,0.6),
              30px 0px 0px 0px rgba(255,255,255,0.3),
              36px 0px 0px 0px rgba(255,255,255,0.2);
  }
  100%{
  box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
              12px 0px 0px 0px rgba(255,255,255,0.3),
              18px 0px 0px 0px rgba(255,255,255,0.6),
              24px 0px 0px 0px rgba(255,255,255,0.7),
              30px 0px 0px 0px rgba(255,255,255,0.9),
              36px 0px 0px 0px rgba(255,255,255,1);
      opacity: 1;
  }
}
@keyframes rain{
  0%{
   box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
              12px 0px 0px 0px rgba(255,255,255,0.9),
              18px 0px 0px 0px rgba(255,255,255,0.7),
              24px 0px 0px 0px rgba(255,255,255,0.6),
              30px 0px 0px 0px rgba(255,255,255,0.3),
              36px 0px 0px 0px rgba(255,255,255,0.2);
  }
  100%{
  box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
              12px 0px 0px 0px rgba(255,255,255,0.3),
              18px 0px 0px 0px rgba(255,255,255,0.6),
              24px 0px 0px 0px rgba(255,255,255,0.7),
              30px 0px 0px 0px rgba(255,255,255,0.9),
              36px 0px 0px 0px rgba(255,255,255,1);
      opacity: 1;
  }
}

@-webkit-keyframes line_flow{
  0%{ width: 0px;}
  100%{width: 40px;}
}
@-moz-keyframes line_flow{
  0%{ width: 0px;}
  100%{width: 40px;}
}
@keyframes line_flow{
  0%{ width: 0px;}
  100%{width: 40px;}
}

/* Me */

.aboutme{
  width: 700px;
  padding: 50px 0;
  border-top: 2px rgba(255,255,255,0.03) solid;
}

.viduthalai{
  background: url(../img/viduthalai.png) no-repeat;
  width: 100px;
  height: 100px;
  border-radius: 0 2px 2px 0;
  float: left;
  opacity: 0.5;
}
.viduthalai:hover{
  opacity: 1;
}
.intro{
  float: left;
  width: 400px;
  padding-left: 20px;
  color: rgba(255,255,255,0.5);
}
.intro a{
  color: rgba(255,255,255,0.5);
}
.intro a:hover{
  color: rgba(255,255,255,1);
}

.intro span, p{
  font-size: 15px;
  font-weight: 200;
}
.intro h3{
  font-size: 20px;
  font-weight: 200;
  margin: 0px;
}
.git{
  color: rgba(255,255,255,0.5);
  float: right;
  text-align: right;
  padding: 10px 20px;
  border-radius: 2px;
  background-color: rgba(0,0,0,0.3);
  font-weight: 200;
}
.git:hover{
   background-color: rgba(0,0,0,0.2);
}

在vue中使用loading组件 CSS3实现loading效果
1、创建一个Loading.vue html JS CSS .loading { text-align: cent...
CSS3 loading加载动画
CSS3 loading加载动画先介绍3种loading效果，喜欢的话收藏一下吧~ 一、loading效果1 二...
css loading
html： ... css： .loading{ -webkit-animation: dot 3s infini...
css loading
Facebook loading animation using
背景虚化加载，用css3实现facebook的loading的实现方式。 To display loading e...
CSS 加载
原文地址：CSS 加载新方式The future of loading CSS Chrome 浏览器有意改变的加...
CSS Loading 纯css
原文来自 @幸福的彼岸 copied by Dylan. 2016-7
[CSS][loading]彩虹loading特效
知识点: width: calc(100% - 2em * (var(--n) - 1)); calc()里面可以...
Ajax Loading Style
CSS3 | Bootstrap 效果图 HTML CSS 全屏Loading效果效果图 HTML（使用Boot...
记在js中判断css是否加载完成（模拟onload）
场景切换主题时动态获取js和css，获取过程中页面加loading效果，获取结束后取消loading效果。由于...