132 lines
3.3 KiB
HTML
132 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh_CN" id="htmlRoot" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
|
|
<meta content="webkit" name="renderer"/>
|
|
<meta
|
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
|
name="viewport"
|
|
/>
|
|
<link href="/favicon.ico" rel="icon"/>
|
|
<title><%= title %></title>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
}
|
|
.loading-wrp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 70px;
|
|
justify-content: center;
|
|
height: 100vh !important;
|
|
width: 100vw !important;
|
|
min-height: 100vh !important;
|
|
min-width: 100vw !important;
|
|
}
|
|
.loading-wrp > .title {
|
|
width: 310px;
|
|
height: 42px;
|
|
}
|
|
.loading-wrp .scaling-squares-spinner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.scaling-squares-spinner,
|
|
.scaling-squares-spinner * {
|
|
box-sizing: border-box;
|
|
}
|
|
.scaling-squares-spinner {
|
|
height: 65px;
|
|
width: 65px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: scaling-squares-animation 1250ms;
|
|
animation-iteration-count: infinite;
|
|
transform: rotate(0deg);
|
|
}
|
|
.scaling-squares-spinner .square {
|
|
height: calc(65px * 0.25 / 1.3);
|
|
width: calc(65px * 0.25 / 1.3);
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
border: calc(65px * 0.04 / 1.3) solid #43A390;
|
|
position: absolute;
|
|
animation-duration: 1250ms;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
.scaling-squares-spinner .square:nth-child(1) {
|
|
animation-name: scaling-squares-spinner-animation-child-1;
|
|
}
|
|
|
|
.scaling-squares-spinner .square:nth-child(2) {
|
|
animation-name: scaling-squares-spinner-animation-child-2;
|
|
}
|
|
|
|
.scaling-squares-spinner .square:nth-child(3) {
|
|
animation-name: scaling-squares-spinner-animation-child-3;
|
|
}
|
|
|
|
.scaling-squares-spinner .square:nth-child(4) {
|
|
animation-name: scaling-squares-spinner-animation-child-4;
|
|
}
|
|
|
|
@keyframes scaling-squares-animation {
|
|
50% {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
@keyframes scaling-squares-spinner-animation-child-1 {
|
|
50% {
|
|
transform: translate(150%, 150%) scale(2, 2);
|
|
}
|
|
}
|
|
|
|
@keyframes scaling-squares-spinner-animation-child-2 {
|
|
50% {
|
|
transform: translate(-150%, 150%) scale(2, 2);
|
|
}
|
|
}
|
|
|
|
@keyframes scaling-squares-spinner-animation-child-3 {
|
|
50% {
|
|
transform: translate(-150%, -150%) scale(2, 2);
|
|
}
|
|
}
|
|
|
|
@keyframes scaling-squares-spinner-animation-child-4 {
|
|
50% {
|
|
transform: translate(150%, -150%) scale(2, 2);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="loading-wrp">
|
|
<div class="scaling-squares-spinner" >
|
|
<div class="square"></div>
|
|
<div class="square"></div>
|
|
<div class="square"></div>
|
|
<div class="square"></div>
|
|
</div>
|
|
<!--<%= VITE_GLOB_APP_TITLE %>-->
|
|
<!-- <img class="title" src="./src/assets/icons/logo-black.svg"> -->
|
|
</div>
|
|
</div>
|
|
|
|
<script>var globalThis = window;</script>
|
|
<script src="/src/main.ts" type="module"></script>
|
|
</body>
|
|
</html>
|