css 点点加载demo

content字符生成配合CSS3 animation的点点点loading效果实例

代码：

CSS代码：

dot {

    display: inline-block;

    height: 1em; line-height: 1;

    vertical-align: -.25em;

    overflow: hidden;

}

dot::before {

    display: block;

    content: '...\A..\A.';

    white-space: pre-wrap;

    animation: dot 3s infinite step-start both;

}

@keyframes dot {

    33% { transform: translateY(-2em); }

    66% { transform: translateY(-1em); }

}

HTML代码：

<a href="javascript:" class="grebtn">订单提交中<dot>...</dot></a>

效果：

订单提交中...

Designed & Powerd by zhangxinxu
更多demo：更多加载地址：http://tawian.io/text-spinners/