CSS3 animation ch单位等宽字体+text-indent点点点动画实例

CSS代码：

@supports (display:none) {
      dot {
        display: inline-block; 
        width: 3ch;
        text-indent: -1ch;
        vertical-align: bottom; 
        overflow: hidden;
        animation: dot 3s infinite step-start both;
        font-family: Consolas, Monaco, monospace;
    }
}

@keyframes dot {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}
                

HTML代码：

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