@charset "UTF-8";
/**
 *
 * @Loading.css
 * @author xinxuzhang
 * @create 15-06-23
 *
**/
/*
 * 结构如下：
 * <div class='ui-loading'>
     <i class='ui-loading-icon'>  <!-- 使用s标签表示小尺寸的loading图标 -->
 *
*/
.ui-loading {
  position: relative;
}

.ui-loading.ui-loading-animation {
  -webkit-animation: fadeIn .5s both;
  animation: fadeIn .5s both;
}

.ui-loading-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(images/Loading/loading-blue.gif);
  /* IE10+ */
  background: url(images/Loading/loading-blue.png), linear-gradient(transparent, transparent);
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.ui-loading > .ui-loading-icon {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
}

s.ui-loading-icon {
  width: 20px;
  height: 20px;
  background: url(images/Loading/loading-blue-s.gif);
  background: url(images/Loading/loading-blue-s.png), linear-gradient(transparent, transparent);
}

.ui-loading > s.ui-loading-icon {
  margin: -10px 0 0 -10px;
}

.ui-loading-primary {
  background-color: #0d57ce;
}

.ui-loading-primary > .ui-loading-icon {
  background: url(images/Loading/loading-white.gif);
  background: url(images/Loading/loading-white.png), linear-gradient(transparent, transparent);
}

.ui-loading-primary > s.ui-loading-icon {
  background: url(images/Loading/loading-white-s.gif);
  background: url(images/Loading/loading-white-s.png), linear-gradient(transparent, transparent);
}

/* 更现代浏览器纯CSS生成 */
@supports (mask: none) or (-webkit-mask: none) {
  .ui-loading-icon {
    position: relative;
    border-radius: 50%;
    -webkit-mask: radial-gradient(transparent 12px, #000 13px);
    mask: radial-gradient(transparent 12px, #000 13px);
    overflow: hidden;
  }
  s.ui-loading-icon {
    -webkit-mask: radial-gradient(transparent 8px, #000 9px);
    mask: radial-gradient(transparent 8px, #000 9px);
  }
  .ui-loading-icon,
  s.ui-loading-icon,
  .ui-loading-primary > .ui-loading-icon,
  .ui-loading-primary > s.ui-loading-icon {
    background: none;
  }
  .ui-loading-icon::before,
  .ui-loading-icon::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    left: 50%;
    top: 0;
  }
  .ui-loading-icon::after {
    left: 0;
    background: linear-gradient(to top, #0d57ce, transparent 90%);
  }
  .ui-loading-icon::before {
    background-color: #0d57ce;
  }
  .ui-loading-primary > .ui-loading-icon::before {
    background-color: #fff;
  }
  .ui-loading-primary > .ui-loading-icon::after {
    background: linear-gradient(to top, #fff, transparent 90%);
  }
}