<dot></dot>

dot {
    display: inline-block;
    height: 1em; line-height: 1;
    vertical-align: -.25em;
    overflow: hidden;
    font-size:initial;
}
dot::before {
    display: block;
    content: ‘...\A..\A.‘;
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
 

其中‘\A‘其實指的是換行符中的LF字符，其unicode編碼是000A，在CSS content屬性中則直接寫作‘\A‘；換行符除了LF字符還有CR字符，其Unicode編碼是000D，在CSS content屬性中則直接寫作‘\D‘。CR字符和LF字符分別指回車（CR）和換行（LF）。

更多方法

content+animation實現loading效果