vue3+ts+vite项目页面初始化loading加载效果
简介
一分钟实现 vue-pure-admin 同款项目加载时的 loading 效果
一、先看效果
1.1 静态效果
1.2 动态效果
二、上代码
核心代码在body里面，代码中已标明。找到你项目的 index.html ，复制粘贴进去即可
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/><title>vue-pure-admin</title><link rel="icon" href="/favicon.ico" /><script>window.process = {};</script></head><body>// 核心代码-开始<div id="app"><style>html,body,#app {width: 100%;height: 100%;display: flex;position: relative;justify-content: center;align-items: center;overflow: hidden;}.loader,.loader:before,.loader:after {border-radius: 50%;width: 2.5em;height: 2.5em;animation-fill-mode: both;animation: loadAnimation 1.8s infinite ease-in-out;}.loader {color: #406eeb;font-size: 10px;margin: 80px auto;position: relative;text-indent: -9999em;transform: translateZ(0);animation-delay: -0.16s;top: 0;transform: translate(-50%, 0);}.loader:before,.loader:after {content: "";position: absolute;top: 0;}.loader:before {left: -3.5em;animation-delay: -0.32s;}.loader:after {left: 3.5em;}@keyframes loadAnimation {0%,80%,100% {box-shadow: 0 2.5em 0 -1.3em;}40% {box-shadow: 0 2.5em 0 0;}}</style><div class="loader"></div></div>// 核心代码-结束<script type="module" src="/src/main.ts"></script></body>
</html>相关文章：
vue3+ts+vite项目页面初始化loading加载效果
简介 一分钟实现 vue-pure-admin 同款项目加载时的 loading 效果 一、先看效果 1.1 静态效果 1.2 动态效果 二、上代码 核心代码在body里面，代码中已标明。找到你项目的 index.html ，复制粘贴进去即可 <!DOCTYPE html> <html lang"en…...
ElasticSearch 数据聚合、自动补全（自定义分词器）、数据同步
文章目录 数据聚合一、聚合的种类二、DSL实现聚合1、Bucket（桶）聚合2、Metrics（度量）聚合 三、RestAPI实现聚合 自动补全一、拼音分词器二、自定义分词器三、自动补全查询四、实现搜索款自动补全（例酒店信息࿰…...
神经网络基础-神经网络补充概念-18-多个样本的向量化
概念 多个样本的向量化通常涉及将一组样本数据组织成矩阵形式，其中每一行代表一个样本，每一列代表样本的特征。这种向量化可以使你更有效地处理和操作多个样本，特别是在机器学习和数据分析中。 代码实现 import numpy as np# 多个样本的数…...
*看门狗1
//while部分是我们在项目中具体需要写的代码，这部分的程序可以用独立看门狗来监控 //如果我们知道这部分代码的执行时间，比如是500ms，那么我们可以设置独立看门狗的 //溢出时间是600ms，比500ms多一点，如果要被监控的程…...
nginx防盗链
防盗链介绍 通过二次访问，请求头中带有referer，的方式不允许访问静态资源。 我们只希望用户通过反向代理服务器才可以拿到我们的静态资源，不希望别的服务器通过二次请求拿到我们的静态资源。 盗链是指在自己的页面上展示一些并不在自己服务…...
8月16日上课内容 第二章 部署LVS-DR群集
本章结构： 数据包流向分析: 数据包流向分析： （1）客户端发送请求到 Director Server（负载均衡器），请求的数据报文（源 IP 是 CIP,目标 IP 是 VIP）到达内核空间。 …...
ViT模型架构和CNN区别
目录 Vision Transformer如何工作 ViT模型架构 ViT工作原理解析 步骤1：将图片转换成patches序列 步骤2：将patches铺平 步骤3：添加Position embedding 步骤4：添加class token 步骤5：输入Transformer Encoder 步…...
发布python模仿2023年全国职业的移动应用开发赛项样式开发的开源的新闻api，以及安卓接入案例代码
python模仿2023年全国职业的移动应用开发赛项样式开发的开源的新闻api，以及原生安卓接入案例代码案例 源码地址:keyxh/newsapi: python模仿2023年全国职业的移动应用开发赛项样式开发的开源的新闻api，以及安卓接入案例代码 (github.com) 目录 1.环境配…...
adb command
查看屏幕分辨率 adb shell wm size 查看dpi adb shell dumpsys window | grep ‘dpi’ WIFI调试： adb tcpip 5555adb connect 设备ip 注意，USB拔插会断掉，所以插上USB后再 adb connect 设备ip。【注意】华为手机自建热点的ip一般是192.1…...
在ARM服务器上一键安装Proxmox VE(以在Oracle Cloud VPS上为例)(甲骨文)
前言 如题，具体用到的说明文档如下 virt.spiritlhl.net 具体流程 首先是按照说明，先得看看自己的服务器符不符合安装 Proxmox VE的条件 https://virt.spiritlhl.net/guide/pve_precheck.html#%E5%90%84%E7%A7%8D%E8%A6%81%E6%B1%82 有提到硬件和软…...
KMP算法（JS）
KMP算法 什么时KMP算法 KMP算法是一种改进的字符串匹配算法 由D.E.Knuth，J.H.Morris和 V.R.Pratt提出的，因此人们称它为克努特—莫里斯—普拉特操作（简称KMP算法）。 KMP的主要思想是当出现字符串不匹配时，可以知道…...
恢复NuGet包_解决:System.BadImageFormatException:无法加载文件或程序集
C#工程 主要是开发了一个 web api接口，这个工程源码去年还可以的，今年换了一个电脑打开工程就报错。 错误提示如下： 在 Microsoft.CodeAnalysis.CSharp.CommandLine.Program.Main(String[] args) Test1 System.BadImageFormatEx…...
Django学习笔记（2）
创建app 属于自动执行了python manage.py 直接在里面运行startapp app01就可以创建app01的项目了 之后在setting.py中注册app01 INSTALLED_APPS ["django.contrib.admin","django.contrib.auth","django.contrib.contenttypes","django.c…...
高德地图开发者平台Python应用实践：快速入门周边商业环境信息查询
高德地图开发平台提供了丰富的API接口，可以方便地进行地图数据的开发和分析。在商业分析数据采集中，使用高德地图开发平台的周边查询功能可以快速获取周边商圈、小区等信息，为商业决策提供数据支持。 针对您的需求，我建议采用以下…...
【ES6】—let 声明方式
一、不属于顶层对象window let 关键字声明的变量，不会挂载到window的属性 var a 5 console.log(a) console.log(window.a) // 5 // 5 // 变量a 被挂载到window属性上了 ， a window.alet b 6 console.log(b) console.log(window.b) // 6 // undefin…...
【数据分析入门】Jupyter Notebook
目录 一、保存/加载二、适用多种编程语言三、编写代码与文本3.1 编辑单元格3.2 插入单元格3.3 运行单元格3.4 查看单元格 四、Widgets五、帮助 Jupyter Notebook是基于网页的用于交互计算的应用程序。其可被应用于全过程计算：开发、文档编写、运行代码和展示结果。 …...
反射知识总结
1、反射概述 反射是指对于任何一个Class类，在"运行的时候"都可以直接得到这个类全部成分。在运行时，可以直接得到这个类的构造器对象：Constructor在运行时。可以直接得到这个类的成员变量对象：Field在运行时，…...
MongoDB 安装 linux
本文介绍一下MongoDB的安装教程。 系统环境：CentOS7.4 可以用 cat /etc/redhat-release 查看本机的系统版本号 一、MongoDB版本选择 当前最新的版本为7.0，但是由于7.0版本安装需要升级glibc2.25以上,所以这里我暂时不安装该版本。我们选择的是6.0.9版本…...
什么是KNN( K近邻算法)
什么是KNN( K近邻算法) 虽然名字中有NN，KNN并不是哪种神经网络，它全名K-Nearest-Neighbors：K近邻算法，是机器学习中常用的分类算法。 物以类聚，人以群分。KNN的基础思想很简单，要判断一个新数据的类别&…...
Linux查看命令总结
1.动态实时查找命令 使用以下命令的前提是需要在找到日志位置 tail -f server.log 实时展示日志末尾内容，默认最后10行,相当于增加参数 -n 10 tail -n filename; tail命令扩展 查看日志最后20行内容并实时更新日志 tail -f -n 20 server.log或者 tail -fn 20 ser…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
破解路内监管盲区：免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...
Vue 模板语句的数据来源
🧩 Vue 模板语句的数据来源：全方位解析 Vue 模板（<template> 部分）中的表达式、指令绑定（如 v-bind, v-on）和插值（{{ }}）都在一个特定的作用域内求值。这个作用域由当前 组件…...
用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法
用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...
HTTPS证书一年多少钱？
HTTPS证书作为保障网站数据传输安全的重要工具，成为众多网站运营者的必备选择。然而，面对市场上种类繁多的HTTPS证书，其一年费用究竟是多少，又受哪些因素影响呢？ 首先，HTTPS证书通常在PinTrust这样的专业平…...