loading加载渐进增强实现实例页面

展示

代码

• HTML：

  <i class="icon-loading"></i>
  

• CSS：

  .icon-loading {
      display: inline-block;
      width: 30px; height: 30px;
      background: url(../images/loading.gif);
      background: url(../images/loading.png), linear-gradient(transparent, transparent);
      animation: spin 1s linear infinite;
  }
  @keyframes spin {
      from { transform: rotate(360deg); }
      to   { transform: rotate(0deg); }
  }