在之前的文章里面实现loading组件的封装
其实在日常生活中我们可以采用纯css的组件方式实现loading 的效果
其中<p>元素被绝对定位在其父元素的中心，并且其内部的文本大小和对行间距（line-height）是响应式的，基于视口宽度（vw单位）。此外，它试图在<p>元素之后添加一个伪元素（::after），该伪元素通过CSS动画（@keyframes）来动态地改变其content属性，从而创建一个简单的点（.）加载动画。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<p>😅</p>
<div>没了</div>
</body>
</html>项目的借用的话可以借助状态变量使用v-show来实现在需要的时候进行显示
但需要注意的是没有办法实现全局注册，因为直接定义一个标签的话在sass里面可能会出现一些问题
但通过vuex存储变量，sass进行全局css定义也可以实现，但仅仅适用于小项目使用量不大的情况
实现效果如下
