content+animation to achieve loading effect

<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;
}

Among them, '\A' actually refers to the LF character in the newline character, and its unicode code is 000A, and it is directly written as '\A' in the CSS content attribute; the newline character is not only LF character but also CR character, its Unicode code is 000D , and directly write '\D' in the CSS content property. The CR character and the LF character refer to carriage return (CR) and line feed (LF), respectively.

more ways