在网页中往往需要很多加载动画，这些动画有些复杂有些简单，今天讲解一下最简单的loading动画：

HTML：

<p>加载中</p>

SCSS：

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    font-size: 6vw;
    line-height: 8vw;
}
​
p::after {
    content: "";
    position: absolute;
    top: 0%;
    bottom: 0;
    animation: dot 3s infinite steps(3, start);
    line-height: 9vw;
}
​
@keyframes dot {
    33.33% {
        content: ".";
    }
    66.67% {
        content: "..";
    }
    100% {
        content: "...";
    }
}