CSS3实现点点点加载中或登录中

css

<style>
    @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; }
    }
</style>

html

<div>加载中<dot>...</dot></div>

类似效果：