| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite + Vue</title>
- <style>
- .loader {
- position: relative;
- margin: auto;
- box-sizing: border-box;
- background-clip: padding-box;
- width: 200px;
- height: 200px;
- border-radius: 100px;
- border: 8px solid rgba(255, 255, 255, 0.1);
- -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
- transform-origin: 50% 60%;
- transform: perspective(200px) rotateX(66deg);
- animation: spinner-wiggle 1.2s infinite;
- }
- .loader:before,
- .loader:after {
- content: "";
- position: absolute;
- margin: -4px;
- box-sizing: inherit;
- width: inherit;
- height: inherit;
- border-radius: inherit;
- opacity: .05;
- border: inherit;
- border-color: transparent;
- animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
- }
- .loader:before {
- border-top-color: #09284C;
- }
- .loader:after {
- border-top-color: #09284C;
- animation-delay: 0.3s;
- }
- @keyframes spinner-spin {
- 100% {
- transform: rotate(360deg);
- }
- }
- @keyframes spinner-fade {
- 20% {
- opacity: .1;
- }
- 40% {
- opacity: 1;
- }
- 60% {
- opacity: .1;
- }
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div
- style="background: #09284C; position: fixed; top: 0; right: 0; bottom:0; left: 0; display: flex; align-items: center; justify-content: center; align-items: center;">
- <div class="loader"></div>
- </div>
- </div>
- <script type="module" src="/src/main.js"></script>
- </body>
- </html>
|
