|
18 | 18 | async |
19 | 19 | src="https://scripts.simpleanalyticscdn.com/latest.js" |
20 | 20 | ></script> |
| 21 | + <style> |
| 22 | + :root { |
| 23 | + --loading-bg: #fffbfe; |
| 24 | + --spinner-track: rgba(0, 0, 0, 0.08); |
| 25 | + --spinner-color: #006399; |
| 26 | + } |
| 27 | + @media (prefers-color-scheme: dark) { |
| 28 | + :root { |
| 29 | + --loading-bg: #1c1b1f; |
| 30 | + --spinner-track: rgba(255, 255, 255, 0.12); |
| 31 | + --spinner-color: #90caf9; |
| 32 | + } |
| 33 | + } |
| 34 | + body { |
| 35 | + margin: 0; |
| 36 | + background-color: var(--loading-bg); |
| 37 | + } |
| 38 | + #loading { |
| 39 | + position: fixed; |
| 40 | + inset: 0; |
| 41 | + display: flex; |
| 42 | + flex-direction: column; |
| 43 | + align-items: center; |
| 44 | + justify-content: center; |
| 45 | + background-color: var(--loading-bg); |
| 46 | + z-index: 9999; |
| 47 | + transition: opacity 0.3s ease; |
| 48 | + } |
| 49 | + #loading img { |
| 50 | + width: 96px; |
| 51 | + height: 96px; |
| 52 | + margin-bottom: 28px; |
| 53 | + } |
| 54 | + #loading .spinner { |
| 55 | + width: 36px; |
| 56 | + height: 36px; |
| 57 | + border: 3px solid var(--spinner-track); |
| 58 | + border-top-color: var(--spinner-color); |
| 59 | + border-radius: 50%; |
| 60 | + animation: spin 0.75s linear infinite; |
| 61 | + } |
| 62 | + @keyframes spin { |
| 63 | + to { transform: rotate(360deg); } |
| 64 | + } |
| 65 | + </style> |
21 | 66 | </head> |
22 | 67 | <body> |
| 68 | + <div id="loading"> |
| 69 | + <img src="assets/logo.png" alt="YMapper" /> |
| 70 | + <div class="spinner"></div> |
| 71 | + </div> |
23 | 72 | <script src="flutter_bootstrap.js" async></script> |
| 73 | + <script> |
| 74 | + const loading = document.getElementById('loading'); |
| 75 | + const observer = new MutationObserver(() => { |
| 76 | + if (document.querySelector('flt-glass-pane')) { |
| 77 | + loading.style.opacity = '0'; |
| 78 | + setTimeout(() => loading.remove(), 300); |
| 79 | + observer.disconnect(); |
| 80 | + } |
| 81 | + }); |
| 82 | + observer.observe(document.body, { childList: true, subtree: true }); |
| 83 | + </script> |
24 | 84 | </body> |
25 | 85 | </html> |
0 commit comments