123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" href="/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>后台管理系统</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .preload {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- width: 100vw;
- }
-
- .circular {
- height: 42px;
- width: 42px;
- animation: loading-rotate 2s linear infinite;
- }
-
- .circular .path {
- animation: loading-dash 1.5s ease-in-out infinite;
- stroke-dasharray: 90, 150;
- stroke-dashoffset: 0;
- stroke-width: 2;
- stroke: #4073fa;
- stroke-linecap: round;
- }
-
- @keyframes loading-rotate {
- 100% {
- transform: rotate(1turn);
- }
- }
-
- @keyframes loading-dash {
-
- 0% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -40px;
- }
-
- 100% {
- stroke-dasharray: 90, 150;
- stroke-dashoffset: -120px;
- }
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="preload">
- <svg viewBox="25 25 50 50" class="circular">
- <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
- </svg>
- </div>
- </div>
- <script type="module" src="/src/main.ts"></script>
- </body>
- </html>
|