背景

为了增加系统的交互性，我们在加载数据时通常会增加一些loading动效，但是在某些场景下只需要一些简单文字提醒。比如说使用【加载中】或者【loading】等字段，但是写静态的字符又显得交互性不足，所以今天我们来简单实现下这种效果。先看效果图：

实现思路

实现思路很简单，就是给需要打点点的字符通过@keyframes来设置after伪元素的content，从而达到打点点效果。

代码实现

其实知道了思路代码总共也没有几行，如下：

<template><view class="loading">加载中</view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">.loading {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  font-size: 80rpx;}.loading::after {content: "";position: absolute;top: 0%;bottom: 0;animation: dot 3s infinite steps(3, start);//这里分三步来打点点line-height: 60rpx;}@keyframes dot {33.33% {content: ".";}66.67% {content: "..";}100% {content: "...";}}
</style>

尾巴

今天实现的是一个很小很简单的功能，但是有时候在项目实际使用中却是很有效果的。
给大家分享的都是实际项目中我总结出的一些经验，希望能给大家帮助，大佬可以直接忽略。如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！