页面加载中-默认加载模块

/加载条
<style type="text/css" media="screen">
  .loadingBarNew{margin-top: 1em; padding: 1em;}
  .loadingBarNew .loadingBar{background: #efefef; margin-bottom: 1em; margin-top: 0; animation: loading 1s linear 

infinite alternate; -webkit-animation: loading 1s linear infinite alternate; height: 1em;}
  .loadingBarNew hr{margin: 0.5em 0 1.5em;}
  .hidden-xs .loadingBar{height: 5em;}
  .loadingBarNew>.row .row:nth-of-type(1) .loadingBar{animation-delay: 200ms; -webkit-animation-delay: 200ms;}
  .loadingBarNew>.row .row:nth-of-type(2) .loadingBar{animation-delay: 400ms; -webkit-animation-delay: 400ms;}
  .loadingBarNew>.row .row:nth-of-type(3) .loadingBar{animation-delay: 600ms; -webkit-animation-delay: 600ms;}
  .loadingBarNew>.row .hidden-xs .loadingBar{animation-delay: 800ms; -webkit-animation-delay: 800ms;}
  .loadingBarNew>.row:nth-of-type(2) .loadingBar{animation-delay: 1000ms; -webkit-animation-delay: 1000ms;}
  .loadingBarNew>.row:nth-of-type(3) .loadingBar{animation-delay: 1200ms; -webkit-animation-delay: 1200ms;}
  .loadingBarNew>.row:nth-of-type(4) .loadingBar{animation-delay: 1400ms; -webkit-animation-delay: 1400ms;}
  @keyframes loading {0% {background: #efefef;} 50%,100% {background: #d8d8d8;}}
</style>
<div class="loadingBarNew">
  <div class="row">
    <div class="col-sm-10">
      <div class="row">
        <div class="col-xs-10"><div class="loadingBar"></div></div>
      </div>
      <div class="row">
        <div class="col-xs-5"><div class="loadingBar"></div></div>
      </div>
      <div class="row">
        <div class="col-xs-8"><div class="loadingBar"></div></div>
      </div>
    </div>
    <div class="col-sm-2 hidden-xs"><div class="loadingBar"></div></div>
  </div>
  <hr>
  <div class="row">
    <div class="col-sm-12 col-xs-8"><div class="loadingBar"></div></div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-xs-11"><div class="loadingBar"></div></div>
    <div class="col-sm-5 col-xs-6"><div class="loadingBar"></div></div>
  </div>
  <div class="row">
    <div class="col-sm-4 col-xs-8"><div class="loadingBar"></div></div>
  </div>
  <hr>
</div>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值