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

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

news 2026/3/26 19:04:02

简介

一分钟实现 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里面&#xff0c;代码中已标明。找到你项目的 index.html &#xff0c;复制粘贴进去即可 <!DOCTYPE html> <html lang"en…...

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

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

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

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

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

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

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

*看门狗1

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

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

nginx防盗链

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

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

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

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

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

ViT模型架构和CNN区别

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

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

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

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

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

adb command

查看屏幕分辨率 adb shell wm size 查看dpi adb shell dumpsys window | grep ‘dpi’ WIFI调试&#xff1a; adb tcpip 5555adb connect 设备ip 注意&#xff0c;USB拔插会断掉&#xff0c;所以插上USB后再 adb connect 设备ip。【注意】华为手机自建热点的ip一般是192.1…...

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

在ARM服务器上一键安装Proxmox VE(以在Oracle Cloud VPS上为例)(甲骨文)

前言 如题&#xff0c;具体用到的说明文档如下 virt.spiritlhl.net 具体流程 首先是按照说明&#xff0c;先得看看自己的服务器符不符合安装 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&#xff0c;J.H.Morris和 V.R.Pratt提出的&#xff0c;因此人们称它为克努特—莫里斯—普拉特操作&#xff08;简称KMP算法&#xff09;。 KMP的主要思想是当出现字符串不匹配时&#xff0c;可以知道…...

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

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

C#工程 主要是开发了一个 web api接口&#xff0c;这个工程源码去年还可以的&#xff0c;今年换了一个电脑打开工程就报错。 错误提示如下&#xff1a; 在 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接口&#xff0c;可以方便地进行地图数据的开发和分析。在商业分析数据采集中&#xff0c;使用高德地图开发平台的周边查询功能可以快速获取周边商圈、小区等信息&#xff0c;为商业决策提供数据支持。 针对您的需求&#xff0c;我建议采用以下…...

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

【ES6】—let 声明方式

一、不属于顶层对象window let 关键字声明的变量&#xff0c;不会挂载到window的属性 var a 5 console.log(a) console.log(window.a) // 5 // 5 // 变量a 被挂载到window属性上了 &#xff0c; 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是基于网页的用于交互计算的应用程序。其可被应用于全过程计算&#xff1a;开发、文档编写、运行代码和展示结果。 …...

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

反射知识总结

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

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

MongoDB 安装 linux

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

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

什么是KNN( K近邻算法)

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

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

Linux查看命令总结

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

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

计算机毕业设计springboot校园外卖系统 基于Spring Boot的高校餐饮配送服务平台 Spring Boot框架下的校园在线订餐与配送管理系统

计算机毕业设计springboot校园外卖系统n322b9 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着互联网技术的日益成熟和普及&#xff0c;网络已经深度融入人们的日常生活&…...

编程新知 2026/3/26 17:59:55

Python服务内存持续增长？5个被忽略的__del__陷阱+3种RAII式资源封装模板，今天必须修复！

第一章&#xff1a;Python服务内存持续增长的智能体诊断全景图Python服务在长期运行中出现内存持续增长&#xff0c;是生产环境中高频且隐蔽的稳定性风险。传统人工排查依赖经验与断点调试&#xff0c;难以覆盖异步任务、闭包引用、第三方库缓存等复杂场景。本章构建一个面向可…...

编程新知 2026/3/26 15:42:21

从零开始掌握30+种路径规划算法：可视化学习与实战指南

从零开始掌握30种路径规划算法&#xff1a;可视化学习与实战指南 【免费下载链接】PathPlanning Common used path planning algorithms with animations. 项目地址: https://gitcode.com/gh_mirrors/pa/PathPlanning 你是一个文章写手&#xff0c;你负责为开源项目写专…...

编程新知 2026/3/26 15:34:14

【NR 定位】3GPP NR Positioning 5G定位标准解读（七）：RRC_INACTIVE状态下的高效定位机制

1. RRC_INACTIVE状态下的5G定位挑战与机遇 在5G网络中&#xff0c;RRC_INACTIVE状态是一种独特的节能模式&#xff0c;它允许设备在保持部分网络连接的同时大幅降低功耗。这种状态特别适合物联网设备&#xff0c;比如智能电表、资产追踪器和可穿戴设备。想象一下你家的智能门锁…...

编程新知 2026/3/26 15:15:59

Uvicorn与Packet.net：高性能服务器部署Python服务的完整指南

Uvicorn与Packet.net&#xff1a;高性能服务器部署Python服务的完整指南 【免费下载链接】uvicorn An ASGI web server, for Python. &#x1f984; 项目地址: https://gitcode.com/GitHub_Trending/uv/uvicorn Uvicorn是一个专为Python设计的ASGI Web服务器&#xff0c…...

编程新知 2026/3/26 14:17:20

汉字拼音转换工具选型与实战指南：用pinyinjs解决多场景字符处理难题

汉字拼音转换工具选型与实战指南&#xff1a;用pinyinjs解决多场景字符处理难题 【免费下载链接】pinyinjs 一个实现汉字与拼音互转的小巧web工具库&#xff0c;演示地址&#xff1a; 项目地址: https://gitcode.com/gh_mirrors/pi/pinyinjs 在数字化产品开发中&#xf…...

编程新知 2026/3/26 13:40:59

[FLAC无损下载]音乐爱好者与创作者的高效资源获取方案

[FLAC无损下载]音乐爱好者与创作者的高效资源获取方案 【免费下载链接】NeteaseCloudMusicFlac 根据网易云音乐的歌单, 下载flac无损音乐到本地.。 项目地址: https://gitcode.com/gh_mirrors/nete/NeteaseCloudMusicFlac 在数字音乐产业快速发展的今天&#xff0c;无损…...

编程新知 2026/3/26 13:36:58

别再死磕公式了！用Ansoft Maxwell 2D给永磁无刷电机做仿真，保姆级操作流程（附避坑点）

永磁无刷电机仿真实战&#xff1a;从零掌握Ansoft Maxwell 2D的高效工作流 第一次打开Ansoft Maxwell 2D时&#xff0c;满屏的专业术语和复杂的参数设置界面确实容易让人望而生畏。作为从业十年的电机设计工程师&#xff0c;我完全理解这种面对专业仿真软件时的无力感——理论书…...

编程新知 2026/3/26 13:02:53

小米Pad 5 Windows驱动完整配置指南：解锁平板的桌面级生产力

小米Pad 5 Windows驱动完整配置指南&#xff1a;解锁平板的桌面级生产力 【免费下载链接】MiPad5-Drivers Based on Surface Duo Drivers. 项目地址: https://gitcode.com/gh_mirrors/mi/MiPad5-Drivers 想要让小米Pad 5变身真正的生产力工具吗&#xff1f;这款基于高通…...

编程新知 2026/3/26 12:58:49

LM386集成功放电路实战：从零搭建到波形调试全记录（附实测数据）

LM386集成功放电路实战&#xff1a;从零搭建到波形调试全记录&#xff08;附实测数据&#xff09; 在电子设计领域&#xff0c;音频功率放大器一直是基础却充满挑战的课题。LM386作为经典的集成功放芯片&#xff0c;以其低功耗、高增益和易用性著称&#xff0c;成为入门者和资深…...

编程新知 2026/3/26 11:43:58