纯css的loading效果

在之前的文章里面实现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定义也可以实现,但仅仅适用于小项目使用量不大的情况

实现效果如下

相关推荐
江号软件分享2 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架