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

vue3+ts+vite项目页面初始化loading加载效果

news 文章来源：https://blog.csdn.net/qq_61402485/article/details/132416025 2024/11/30 18:41:07

简介

一分钟实现 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…...

编程日记 2023/8/22 0:41:57

ElasticSearch 数据聚合、自动补全（自定义分词器）、数据同步

文章目录数据聚合一、聚合的种类二、DSL实现聚合1、Bucket（桶）聚合2、Metrics（度量）聚合三、RestAPI实现聚合自动补全一、拼音分词器二、自定义分词器三、自动补全查询四、实现搜索款自动补全（例酒店信息&#xff0…...

编程日记 2023/8/22 0:40:55

神经网络基础-神经网络补充概念-18-多个样本的向量化

概念多个样本的向量化通常涉及将一组样本数据组织成矩阵形式，其中每一行代表一个样本，每一列代表样本的特征。这种向量化可以使你更有效地处理和操作多个样本，特别是在机器学习和数据分析中。代码实现 import numpy as np# 多个样本的数…...

编程日记 2023/8/22 0:39:54

*看门狗1

//while部分是我们在项目中具体需要写的代码，这部分的程序可以用独立看门狗来监控 //如果我们知道这部分代码的执行时间，比如是500ms，那么我们可以设置独立看门狗的 //溢出时间是600ms，比500ms多一点，如果要被监控的程…...

编程日记 2023/8/22 0:38:53

nginx防盗链

防盗链介绍通过二次访问，请求头中带有referer，的方式不允许访问静态资源。我们只希望用户通过反向代理服务器才可以拿到我们的静态资源，不希望别的服务器通过二次请求拿到我们的静态资源。盗链是指在自己的页面上展示一些并不在自己服务…...

编程日记 2023/8/22 0:37:51

8月16日上课内容第二章部署LVS-DR群集

本章结构： 数据包流向分析: 数据包流向分析： （1）客户端发送请求到 Director Server（负载均衡器），请求的数据报文（源 IP 是 CIP,目标 IP 是 VIP）到达内核空间。 &#xf…...

编程日记 2023/8/22 0:36:50

ViT模型架构和CNN区别

目录 Vision Transformer如何工作 ViT模型架构 ViT工作原理解析步骤1：将图片转换成patches序列步骤2：将patches铺平步骤3：添加Position embedding 步骤4：添加class token 步骤5：输入Transformer Encoder 步…...

编程日记 2023/8/22 0:35:48

发布python模仿2023年全国职业的移动应用开发赛项样式开发的开源的新闻api，以及安卓接入案例代码

python模仿2023年全国职业的移动应用开发赛项样式开发的开源的新闻api，以及原生安卓接入案例代码案例源码地址:keyxh/newsapi: python模仿2023年全国职业的移动应用开发赛项样式开发的开源的新闻api，以及安卓接入案例代码 (github.com) 目录 1.环境配…...

编程日记 2023/8/22 0:34:47

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…...

编程日记 2023/8/22 0:33:46

在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 有提到硬件和软…...

编程日记 2023/8/22 0:32:44

KMP算法（JS）

KMP算法什么时KMP算法 KMP算法是一种改进的字符串匹配算法由D.E.Knuth，J.H.Morris和 V.R.Pratt提出的，因此人们称它为克努特—莫里斯—普拉特操作（简称KMP算法）。 KMP的主要思想是当出现字符串不匹配时，可以知道…...

编程日记 2023/8/22 0:31:43

恢复NuGet包_解决:System.BadImageFormatException:无法加载文件或程序集

C#工程主要是开发了一个 web api接口，这个工程源码去年还可以的，今年换了一个电脑打开工程就报错。错误提示如下： 在 Microsoft.CodeAnalysis.CSharp.CommandLine.Program.Main(String[] args) Test1 System.BadImageFormatEx…...

编程日记 2023/8/22 0:30:42

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…...

编程日记 2023/8/22 0:29:41

高德地图开发者平台Python应用实践：快速入门周边商业环境信息查询

高德地图开发平台提供了丰富的API接口，可以方便地进行地图数据的开发和分析。在商业分析数据采集中，使用高德地图开发平台的周边查询功能可以快速获取周边商圈、小区等信息，为商业决策提供数据支持。针对您的需求，我建议采用以下…...

编程日记 2023/8/22 0:28:40

【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…...

编程日记 2023/8/22 0:27:39

【数据分析入门】Jupyter Notebook

目录一、保存/加载二、适用多种编程语言三、编写代码与文本3.1 编辑单元格3.2 插入单元格3.3 运行单元格3.4 查看单元格四、Widgets五、帮助 Jupyter Notebook是基于网页的用于交互计算的应用程序。其可被应用于全过程计算：开发、文档编写、运行代码和展示结果。 …...

编程日记 2023/8/22 0:26:38

反射知识总结

1、反射概述反射是指对于任何一个Class类，在"运行的时候"都可以直接得到这个类全部成分。在运行时，可以直接得到这个类的构造器对象：Constructor在运行时。可以直接得到这个类的成员变量对象：Field在运行时&#xff0c…...

编程日记 2023/8/22 0:25:34

MongoDB 安装 linux

本文介绍一下MongoDB的安装教程。系统环境：CentOS7.4 可以用 cat /etc/redhat-release 查看本机的系统版本号一、MongoDB版本选择当前最新的版本为7.0，但是由于7.0版本安装需要升级glibc2.25以上,所以这里我暂时不安装该版本。我们选择的是6.0.9版本…...

编程日记 2023/8/22 0:24:32

什么是KNN( K近邻算法)

什么是KNN( K近邻算法) 虽然名字中有NN，KNN并不是哪种神经网络，它全名K-Nearest-Neighbors：K近邻算法，是机器学习中常用的分类算法。物以类聚，人以群分。KNN的基础思想很简单，要判断一个新数据的类别&…...

编程日记 2023/8/22 0:23:30

Linux查看命令总结

1.动态实时查找命令使用以下命令的前提是需要在找到日志位置 tail -f server.log 实时展示日志末尾内容，默认最后10行,相当于增加参数 -n 10 tail -n filename; tail命令扩展查看日志最后20行内容并实时更新日志 tail -f -n 20 server.log或者 tail -fn 20 ser…...

编程日记 2023/8/22 0:22:28

npm报错 Cannot find module ‘@vuepress\core\node_m

通常是由于缺少依赖包或者依赖包版本不兼容引起的。可以尝试以下步骤来解决这个问题： 确保您的项目的依赖包是最新的，可以运行 npm update 命令来更新依赖包。如果更新依赖包后仍然有问题，可以尝试删除 node_modules 文件夹，并重…...

编程日记 2023/8/22 0:21:27

mybatis入门环境搭建及CRUD

一、MyBatis介绍 1.1 MyBatis的定义 MyBatis是一个开源的Java持久化框架，它可以帮助开发人员简化数据库访问的过程。它提供了一种将SQL语句与Java代码进行映射的方式，使得开发人员可以通过简单的配置文件来定义SQL语句，而无需编写繁琐的JDB…...

编程日记 2023/8/22 0:20:26

小程序变化历史记录

2023年8月26 小程序机号快速验证组件将需要付费使用自2023年8月26日起，手机号快速验证组件将需要付费使用。标准单价为：每次组件调用成功，收费0.03元 https://blog.csdn.net/qq_37215621/article/details/131453551 自2023年9月1日起&…...

编程日记 2023/8/22 0:19:23

jstack（Stack Trace for Java）Java堆栈跟踪工具

jstack（Stack Trace for Java）Java堆栈跟踪工具 jstack（Stack Trace for Java）命令用于生成虚拟机当前时刻的线程快照（一般称为threaddump或者javacore文件）。线程快照就是当前虚拟机内每一条线程正在执…...

编程日记 2023/8/22 0:18:21

linux面试题整理

目录标题基础篇1.说下企业为什么用linux而不用windows？2.linux学过什么，怎么学习的？3.linux基本命令4.linux查看端口、进程、文件类型、挂载5.使用top命令之后前五行会显示什么内容？6.linux怎么查找一个文件7.vim进去后的各种操作…...

编程日记 2023/8/22 0:17:20

Linux笔记

Linux基础命令 Linux的目录结构 /，根目录是最顶级的目录了Linux只有一个顶级目录：/路径描述的层次关系同样适用/来表示/home/itheima/a.txt，表示根目录下的home文件夹内有itheima文件夹，内有a.txt ls命令功能：列出…...

编程日记 2023/8/22 0:16:19

Dockerfile制作Web应用系统nginx镜像

目录 1.所需实现的具体内容 2.编写Dockerfile Dockerfile文件内容： 默认网页内容： 3.构建镜像 4.现在我们运行一个容器，查看我们的网页是否可访问 5.现在再将我们的镜像打包并上传到镜像仓库 1.所需实现的具体内容基于centos基础镜像…...

编程日记 2023/8/22 0:15:17

lama-cleaner：基于SOTA AI 模型Stable Diffusion驱动的图像修复工具

介绍由 SOTA AI 模型提供支持的图像修复工具。从照片中删除任何不需要的物体、缺陷、人物，或擦除并替换（由Stable Diffusion驱动）照片上的任何东西。特征 1.多种SOTA AI模型擦除模型：LaMa/LDM/ZITS/MAT/FcF/Manga 擦除和替…...

编程日记 2023/8/22 0:14:16

LVS-DR模式以及其中ARP问题

目录 LVS_DR LVS_DR数据包流向分析 LVS-DR中ARP问题问题一问题二解决ARP的两个问题的设置方法 LVS-DR特点 LVS-DR优缺点优点缺点 LVS-DR集群构建 1.配置负载调度器 2.部署共享存储 3.配置节点服务器 4.测试 LVS 群集 LVS_DR LVS_DR数据包流向分析客户端…...

编程日记 2023/8/22 0:13:15

2023-08-15 Untiy进阶 C#知识补充5——C#6主要功能与语法

文章目录一、概述二、静态导入三、异常筛选器四、nameof 运算符注意：在此仅提及 Unity 开发中会用到的一些功能和特性，对于不适合在 Unity 中使用的内容会忽略。一、概述 C#6 的新增功能和语法主要包含： >运算符（C#…...

编程日记 2023/8/22 0:12:14

资讯网站模版/百度推广

初学Java Web，看的是明日科技的《Java Web从入门到精通》，其中第六章 JSP内置对象 6.2.3节获取cookie 有一个例子： 通过cookie保存并读取用户登录信息： index.jsp 代码如下 <% page language"java" contentType&q…...

编程日记 2024/11/30 17:59:02

如果做网站接口/网络营销的优缺点

如果h5的标签不能满足你的需求，那就用这个组件Vue-Video-Player吧，也许可以覆盖到你的需求。class"video-player vjs-custom-skin"ref"videoPlayer":playsinline"true":options"playerOptions">配置参数&…...

编程日记 2024/11/30 15:44:50

用jsp做的购物网站/百度广告推广怎么做

Day025模块导入模块 : import 模块名 1. 检查是否导入过模块,检查顺序内存->内置->sys.path 2. 如果没有导入过这个模块则先创建一个名称空间 3. 然后将导入的模块执行一遍,在把执行的结果放在刚才的空间中 4. 把模块的名字命名这个空间 1.所有被导入的模块都会放…...

编程日记 2024/11/30 14:58:22