当前位置: 首页 > news >正文

vue实现简易的全局加载动画效果

效果展示

image-20240729200642160

思路

封装一个组件,放Img,伪类样式,固定在屏幕fixed

然后App应用这个组件,Z index拉最大,防止用户在加载动画时乱点,

v-show绑定loading,该数据可以放vuex还是任一的公共状态管理变量区域

代码

<template><!--组件的结构--><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div>
</template>
<script>
//组件交互相关的代码(数据、方法等等)
export default {name: 'pageLoading',data() {return {}},methods: {},
}
</script><style>
.loading-bg {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);position: fixed;display: flex;justify-content: center;align-items: center;z-index: 100000;
}.loading-img {width: 100px;height: 100px;background: url('https://cdn.zww0891.fun/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240701112347.jpg') center center;background-size: cover;border-radius: 50%;border: 4px solid #f0f0f2;animation: blink infinite ease 0.5s;
}.loading-image-dot:before {content: '';position: absolute;background: #6bdf8f;border: 4px solid #f0f0f2;border-radius: 50%;width: 30px;height: 30px;top: 50%;left: 50%;transform: translateX(20px) translateY(20px);
}@keyframes blink {0% {opacity: 0.4;}50% {opacity: 1;}100%{opacity: 0.4;}
}
</style>
http://www.lryc.cn/news/409712.html

相关文章:

  • Linux网络工具“瑞士军刀“集合
  • Sentinel隔离、降级、授权规则详解
  • C++11 列表初始化与类型声明
  • 缓存策略自定义:Laravel应用性能优化秘籍
  • python连接sqlserver,封装操作
  • 原生PHP/JS自主开发的交友内核框架婚恋交友系统V10
  • 如何在Java、Python、GO程序中使用AI人脸识别API接口
  • 在vue使用MQTT
  • DNS、网关、IP、DHCP
  • vue2 vue3 props 的处理机制
  • C++第十弹 ---- vector的介绍及使用
  • ValueError: invalid literal for int() with base 10: ‘a‘
  • [C++探索]初始化列表,static成员,友元函数,内部类,匿名对象
  • 搭建自己的金融数据源和量化分析平台(二):读取上交所股票列表
  • Kafka知识总结(分区机制+压缩机制+拦截器+副本机制)
  • WordPress原创插件:搜索引擎抓取首图seo图片
  • Android Framework 之AMS
  • AnConda环境配置学习笔记
  • 架构师的36项修炼 学习笔记
  • Python | “IndexError: tuple index out of range” 【已解决】
  • Linux上部署easySpider及基本使用
  • Qt Designer,仿作一个ui界面的练习(二):部件内容的填充
  • LIS2DH12传感器底电流100ua处理
  • 五、Spring Boot - 上手篇(1)
  • Spring -- 使用XML开发MyBatis
  • openmv 学习笔记(24电赛笔记)
  • 【C语言】【数据结构】二分查找(数组的练习)
  • Web:Url 编码 -13
  • typescript 引用数据类型
  • OpenCV库学习之cv2.Sobel函数