正在加载三点动画

正在加载中<dot>...</dot>
dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    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); } 
}