mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-08 07:31:09 +08:00
feat: 添加自定义应用加载动画页面
添加一个带有熊猫动画的 loading.html 作为应用加载页面，替换默认的加载体验。同时更新 VS Code 设置，将 HTML 文件的默认格式化工具从 Prettier 改为 VS Code 内置的 HTML 语言功能，以更好地处理 HTML 文件。
This commit is contained in:
dap
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@@ -38,7 +38,7 @@
|
||||
},
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
"editor.defaultFormatter": "vscode.html-language-features"
|
||||
},
|
||||
"[css]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
|
||||
288
apps/web-antd/loading.html
Normal file
288
apps/web-antd/loading.html
Normal file
@@ -0,0 +1,288 @@
|
||||
<style data-app-loading="inject-css">
|
||||
html {
|
||||
/* same as antdv-next/dist/reset.css setting, avoid the title line-height changed */
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.dark .loading {
|
||||
background-color: #0d0d10;
|
||||
}
|
||||
|
||||
.dark .loading .title {
|
||||
color: rgb(255 255 255 / 85%);
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
background-color: #f4f7f9;
|
||||
}
|
||||
|
||||
/* .loading.hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.6s ease-out;
|
||||
} */
|
||||
|
||||
.loading .title {
|
||||
margin-top: 36px;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
}
|
||||
|
||||
#__app-loading__.hidden {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 1s ease-out;
|
||||
}
|
||||
|
||||
/** 下面是自定义 **/
|
||||
/* From Uiverse.io by Danishrehman786 */
|
||||
.panda-container {
|
||||
position: relative;
|
||||
width: 290px;
|
||||
height: 250px;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.panda-head {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
background: white;
|
||||
border: 4px solid #222;
|
||||
border-radius: 50%;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
z-index: 4;
|
||||
box-shadow:
|
||||
0 3px 10px rgba(0, 0, 0, 0.1),
|
||||
inset 0 -5px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ear {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #222;
|
||||
border: 4px solid #222;
|
||||
border-radius: 50%;
|
||||
z-index: 3;
|
||||
box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.ear-left {
|
||||
top: 30px;
|
||||
left: 40px;
|
||||
transform: rotate(-15deg);
|
||||
animation: ear-twitch-left 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ear-right {
|
||||
top: 30px;
|
||||
left: 190px;
|
||||
transform: rotate(15deg);
|
||||
animation: ear-twitch-right 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.eye-patch {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 70px;
|
||||
background: #222;
|
||||
border-radius: 50%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.eye-patch-left {
|
||||
top: 60px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.eye-patch-right {
|
||||
top: 60px;
|
||||
left: 110px;
|
||||
}
|
||||
|
||||
.eye {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
z-index: 6;
|
||||
animation: blink 4s linear infinite;
|
||||
}
|
||||
|
||||
.eye-left {
|
||||
top: 75px;
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.eye-right {
|
||||
top: 75px;
|
||||
left: 125px;
|
||||
}
|
||||
|
||||
.pupil {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #222;
|
||||
border-radius: 50%;
|
||||
z-index: 7;
|
||||
animation: look-around 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pupil-left {
|
||||
top: 82px;
|
||||
left: 53px;
|
||||
}
|
||||
|
||||
.pupil-right {
|
||||
top: 82px;
|
||||
left: 133px;
|
||||
}
|
||||
|
||||
.nose {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
background: #222;
|
||||
border-radius: 50%;
|
||||
top: 110px;
|
||||
left: 85px;
|
||||
z-index: 8;
|
||||
box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mouth {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 12px solid #222;
|
||||
border-radius: 50%;
|
||||
top: 135px;
|
||||
left: 92px;
|
||||
z-index: 7;
|
||||
transform: rotate(180deg);
|
||||
animation: smile 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
45%,
|
||||
55%,
|
||||
100% {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
48%,
|
||||
52% {
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes look-around {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(3px, 3px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-3px, 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes smile {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(180deg) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(180deg) scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ear-twitch-left {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ear-twitch-right {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loading" id="__app-loading__">
|
||||
<div class="panda-container">
|
||||
<div class="ear ear-left"></div>
|
||||
<div class="ear ear-right"></div>
|
||||
<div class="panda-head">
|
||||
<div class="eye-patch eye-patch-left"></div>
|
||||
<div class="eye-patch eye-patch-right"></div>
|
||||
<div class="eye eye-left"></div>
|
||||
<div class="eye eye-right"></div>
|
||||
<div class="pupil pupil-left"></div>
|
||||
<div class="pupil pupil-right"></div>
|
||||
<div class="nose"></div>
|
||||
<div class="mouth"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<%= VITE_APP_TITLE %>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user