lu2/theme/modern/css/common/ui/Loading.css

Simple and flexible UI component library based on native HTML and JavaScript

@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 0.8s linear infinite;
  animation: spin 800ms linear infinite; }

.ui-loading > .ui-loading-icon {
  display: block;
  position: absolute;
  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: #00a5e0; }

.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); }