123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <!doctype html>
- <html lang="">
- <head>
- <meta charset="UTF-8" />
- <link rel="icon" href="/favicon.ico" />
- <meta
- name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
- />
- <title>Local Block</title>
- <style type="text/css">
- /* HTML: <div class="loader"></div> */
- #Loading,
- #Loading > div {
- position: relative;
- box-sizing: border-box;
- }
- #Loading {
- width: 100vw;
- height: 100vh;
- top: 50%;
- left: 50%;
- position: absolute;
- transform: translateY(-50%) translateX(-50%);
- z-index: 100;
- display: block;
- font-size: 0;
- color: #4F4F4F;
- }
- #Loading.la-dark {
- color: #333;
- }
- #Loading > div {
- display: inline-block;
- float: none;
- background-color: currentColor;
- border: 0 solid currentColor;
- }
- #Loading {
- width: 32px;
- height: 32px;
- }
- #Loading > div:nth-child(1),
- #Loading > div:nth-child(2) {
- position: absolute;
- left: 0;
- width: 100%;
- }
- #Loading > div:nth-child(1) {
- top: -25%;
- z-index: 1;
- height: 100%;
- border-radius: 10%;
- animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
- }
- #Loading > div:nth-child(2) {
- bottom: -9%;
- height: 10%;
- background: #000;
- border-radius: 50%;
- opacity: 0.2;
- animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
- }
- #Loading.la-sm {
- width: 16px;
- height: 16px;
- }
- #Loading.la-2x {
- width: 64px;
- height: 64px;
- }
- #Loading.la-3x {
- width: 96px;
- height: 96px;
- }
- @keyframes square-jelly-box-animate {
- 17% {
- border-bottom-right-radius: 10%;
- }
- 25% {
- transform: translateY(25%) rotate(22.5deg);
- }
- 50% {
- border-bottom-right-radius: 100%;
- transform: translateY(50%) scale(1, 0.9) rotate(45deg);
- }
- 75% {
- transform: translateY(25%) rotate(67.5deg);
- }
- 100% {
- transform: translateY(0) rotate(90deg);
- }
- }
- @keyframes square-jelly-box-shadow {
- 50% {
- transform: scale(1.25, 1);
- }
- }
- </style>
- </head>
- <body>
- <div id="Loading">
- <div></div>
- <div></div>
- </div>
- <div id="app"></div>
- <script type="module" src="/src/main.js"></script>
- </body>
- </html>
|