css伪元素实现加载...

借助动画操控伪元素的content,动画方式使用steps使得更符合视觉效果

代码示例:

<style>
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: "...";
    }
}   
</style>

<p>加载中</p>

效果图: