Spaces:
Running
Running
So, is this just the code to put somewhere, and that in turn would give me the app?
7f2753f verified | class LoaderComponent extends HTMLElement { | |
| constructor() { | |
| super(); | |
| } | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.render(); | |
| } | |
| render() { | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :host { | |
| display: contents; | |
| } | |
| .loader-grid { | |
| display: grid; | |
| grid-template-columns: repeat(1, 1fr); | |
| gap: 1.5rem; | |
| } | |
| @media (min-width: 768px) { | |
| .loader-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .loader-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| .skeleton-card { | |
| background: white; | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| border: 1px solid #e5e7eb; | |
| } | |
| :host-context(.dark) .skeleton-card { | |
| background: #1f2937; | |
| border-color: #374151; | |
| } | |
| .skeleton-image { | |
| height: 12rem; | |
| background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| :host-context(.dark) .skeleton-image { | |
| background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); | |
| background-size: 200% 100%; | |
| } | |
| .skeleton-content { | |
| padding: 1.25rem; | |
| } | |
| .skeleton-line { | |
| height: 0.75rem; | |
| background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: 0.25rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| :host-context(.dark) .skeleton-line { | |
| background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); | |
| background-size: 200% 100%; | |
| } | |
| .skeleton-line.short { | |
| width: 60%; | |
| } | |
| .skeleton-line.title { | |
| height: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| </style> | |
| <div class="loader-grid"> | |
| ${Array(6).fill(0).map(() => ` | |
| <div class="skeleton-card"> | |
| <div class="skeleton-image"></div> | |
| <div class="skeleton-content"> | |
| <div class="skeleton-line short"></div> | |
| <div class="skeleton-line title"></div> | |
| <div class="skeleton-line"></div> | |
| <div class="skeleton-line short"></div> | |
| </div> | |
| </div> | |
| `).join('')} | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('loader-component', LoaderComponent); |