我的磨“数据正在加载中”效果代码

2014-05-01 03:37:13 -0700

此代码仅供参考

代码说明

分别在CSS和HTML设置框里添加如下代码

CSS代码

html代码

代码二说明

在上面的基础上添加了loading动态加载图

CSS代码

.load1 {
  margin: 1px auto;
  width: 48px;
  height: 35px;
  text-align: center;
  font-size: 8px;
}
.load1 > div {
  background-color: #76c2fa ;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.load1 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.load1 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.load1 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.load1 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

#loader_container { 
      text-align:center; 
      position:fixed; 
      top:70px; 
      left:0; 
      width:100%; 
      z-index:10000; 
      filter:alpha(opacity=85); 
      -moz-opacity:0.85; 
      opacity:0.85; 
      } 
      * html #loader_container { 
      position:absolute; 
      } 
      #loader { 
      font-family:Tahoma, Helvetica, sans; 
      font-size:12px; 
      color:#004a8f; 
      background-color:#ecf5ff; 
      display:block; 
      width:200px; 
      border:1px solid #81b9ff; 
      text-align:left; 
      margin:0 auto; 
      padding:5px 0; 
      } 
      #loader div { 
      margin: 4px 0; 
      }

html代码

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N