feat: 添加白屏loading效果
This commit is contained in:
张传龙
parent
3990d4da80
commit
21c1d6d3aa
21
index.html
21
index.html
@ -8,11 +8,30 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" href="/favicon.svg" />
|
<link rel="icon" href="/favicon.svg" />
|
||||||
|
<link rel="stylesheet" href="/resource/loading.css" />
|
||||||
|
|
||||||
<title><%= title %></title>
|
<title><%= title %></title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app">
|
||||||
|
|
||||||
|
<!-- 白屏时的loading效果 -->
|
||||||
|
<div class="loading-container">
|
||||||
|
<div id="loadingLogo" class="loading-svg"></div>
|
||||||
|
<div class="loading-spin__container">
|
||||||
|
<div class="loading-spin">
|
||||||
|
<div class="left-0 top-0 loading-spin-item"></div>
|
||||||
|
<div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
|
||||||
|
<div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
|
||||||
|
<div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loading-title"><%= title %></div>
|
||||||
|
</div>
|
||||||
|
<script src="/resource/loading.js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
91
public/resource/loading.css
Normal file
91
public/resource/loading.css
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
.loading-container {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-svg {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
color: var(--primaryColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spin__container {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
margin: 36px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spin {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
animation: loadingSpin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-0 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.right-0 {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.top-0 {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.bottom-0 {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spin-item {
|
||||||
|
position: absolute;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
background-color: var(--primaryColor);
|
||||||
|
border-radius: 8px;
|
||||||
|
-webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loadingSpin {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loadingPulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-delay-500 {
|
||||||
|
-webkit-animation-delay: 500ms;
|
||||||
|
animation-delay: 500ms;
|
||||||
|
}
|
||||||
|
.loading-delay-1000 {
|
||||||
|
-webkit-animation-delay: 1000ms;
|
||||||
|
animation-delay: 1000ms;
|
||||||
|
}
|
||||||
|
.loading-delay-1500 {
|
||||||
|
-webkit-animation-delay: 1500ms;
|
||||||
|
animation-delay: 1500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #6a6a6a;
|
||||||
|
}
|
||||||
25
public/resource/loading.js
Normal file
25
public/resource/loading.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/**
|
||||||
|
* 初始化加载效果的svg格式logo
|
||||||
|
* @param {string} id - 元素id
|
||||||
|
*/
|
||||||
|
function initSvgLogo(id) {
|
||||||
|
const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512" data-v-fba6e5d0=""><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z" style="fill:currentColor"></path></svg>`;
|
||||||
|
const appEl = document.querySelector(id);
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.innerHTML = svgStr;
|
||||||
|
if (appEl) {
|
||||||
|
appEl.appendChild(div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addThemeColorCssVars() {
|
||||||
|
const key = '__THEME_COLOR__'
|
||||||
|
const defaultColor = '#316c72';
|
||||||
|
const themeColor = window.localStorage.getItem(key) || defaultColor;
|
||||||
|
const cssVars = `--primaryColor: ${themeColor}`;
|
||||||
|
document.documentElement.style.cssText = cssVars;
|
||||||
|
}
|
||||||
|
|
||||||
|
addThemeColorCssVars();
|
||||||
|
|
||||||
|
initSvgLogo('#loadingLogo');
|
||||||
@ -30,6 +30,9 @@ watch(
|
|||||||
(vars) => {
|
(vars) => {
|
||||||
for (const key in vars) {
|
for (const key in vars) {
|
||||||
useCssVar(`--${key}`, document.documentElement).value = vars[key]
|
useCssVar(`--${key}`, document.documentElement).value = vars[key]
|
||||||
|
if (key === 'primaryColor') {
|
||||||
|
window.localStorage.setItem('__THEME_COLOR__', vars[key])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user