TMDB offers a powerful API service that is free for personal use. Please ensure you attribute TMDB for any images or data you use. You can find the logos for attribution here.
a7479c8
verified
| class ApiLoader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .loader-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 2rem; | |
| } | |
| .loader { | |
| width: 48px; | |
| height: 48px; | |
| border: 5px solid #6d28d9; | |
| border-bottom-color: transparent; | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| animation: rotation 1s linear infinite; | |
| } | |
| @keyframes rotation { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| <div class="loader-container"> | |
| <span class="loader"></span> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('api-loader', ApiLoader); |