| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| html, body { margin: 0; padding: 0; height: 100%; background: transparent; display: flex; justify-content: center; align-items: center; } |
| |
| .skeleton { |
| background: #e0e0e0; |
| animation: pulse 1.5s infinite; |
| border-radius: 8px; |
| opacity: 0.7; |
| } |
| |
| .banner { |
| width: calc(min(100vw - 45px, 841px)); |
| height: auto; |
| max-height: 512px; |
| aspect-ratio: 16/9; |
| } |
| |
| @keyframes pulse { 0% { opacity: 0.6; } 100% { opacity: 0.9; } } |
| </style> |
| </head> |
| <body> |
| <script> |
| const skeleton = document.createElement('div'); |
| skeleton.className = 'skeleton banner'; |
| document.body.appendChild(skeleton); |
| </script> |
| </body> |
| </html> |
