Untitled

dabblet.css

@import url(http://img3.douban.com/css/core/packed__init_1507990223.css);
body { padding:20px; }
.sample-1 { color:#396; }

/*-----------------------------------*/

.loading i { 
  position: relative;
  margin-right: 2px;
  line-height: .5ex;
  font-size: 18px;
  font-style: normal;
  -webkit-animation: loading_dot_fade .6s step-end infinite alternate;
     -moz-animation: loading_dot_fade .6s step-end infinite alternate;
      -ms-animation: loading_dot_fade .6s step-end infinite alternate;
       -o-animation: loading_dot_fade .6s step-end infinite alternate;
          animation: loading_dot_fade .6s step-end infinite alternate;
}
.loading i:nth-child(2) {
  -webkit-animation-delay: 0.2s;
     -moz-animation-delay: 0.2s;
      -ms-animation-delay: 0.2s;
       -o-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loading i:nth-child(3) {
  -webkit-animation-delay: 0.4s;
     -moz-animation-delay: 0.4s;
      -ms-animation-delay: 0.4s;
       -o-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@-webkit-keyframes loading_dot_fade {
  0%   { 
    color: inherit;
  }
  50% { 
    color: transparent;
  }
}
@-moz-keyframes loading_dot_fade {
  0%   { 
    color: inherit;
  }
  50% { 
    color: transparent;
  }
}
@-o-keyframes loading_dot_fade {
  0%   { 
    color: inherit;
  }
  50% { 
    color: transparent;
  }
}
@-ms-keyframes loading_dot_fade {
  0%   { 
    color: inherit;
  }
  50% { 
    color: transparent;
  }
}
@keyframes loading_dot_fade {
  0%   { 
    color: inherit;
  }
  50% { 
    color: transparent;
  }
}

dabblet.html

<p>
<!--比如点击执行一个ajax时：-->
<a href="#"><span class="loading">处理中<i>.</i><i>.</i><i>.</i></span></a>


<p>
<!--加载什么时：-->
<span class="loading">下载中<i>.</i><i>.</i><i>.</i></span>


<p class="sample-1">
<!--用字符的好处继承颜色：-->
<span class="loading">正在加载，请稍候<i>.</i><i>.</i><i>.</i></span>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}