| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" href="/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>vue-pure-admin</title>
- <script src="/sortable.min.js"></script>
- <script>
- window.process = {};
- </script>
- </head>
- <body>
- <div id="app">
- <style>
- html,
- body,
- #app {
- width: 100%;
- height: 100%;
- display: flex;
- position: relative;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- }
- .loader,
- .loader:before,
- .loader:after {
- border-radius: 50%;
- width: 2.5em;
- height: 2.5em;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
- animation: loadAnimation 1.8s infinite ease-in-out;
- }
- .loader {
- color: #406eeb;
- font-size: 10px;
- margin: 80px auto;
- position: relative;
- text-indent: -9999em;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation-delay: -0.16s;
- animation-delay: -0.16s;
- top: 0;
- transform: translate(-50%, 0);
- }
- .loader:before,
- .loader:after {
- content: "";
- position: absolute;
- top: 0;
- }
- .loader:before {
- left: -3.5em;
- -webkit-animation-delay: -0.32s;
- animation-delay: -0.32s;
- }
- .loader:after {
- left: 3.5em;
- }
- @-webkit-keyframes loadAnimation {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 2.5em 0 -1.3em;
- }
- 40% {
- box-shadow: 0 2.5em 0 0;
- }
- }
- @keyframes loadAnimation {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 2.5em 0 -1.3em;
- }
- 40% {
- box-shadow: 0 2.5em 0 0;
- }
- }
- </style>
- <div class="loader"></div>
- </div>
- <script type="module" src="/src/main.ts"></script>
- </body>
- </html>
|
