123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <!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>
|