22 lines
750 B
JavaScript
22 lines
750 B
JavaScript
class UiSpinner extends HTMLElement {
|
|
connectedCallback() {
|
|
const size = this.getAttribute('size') || 'md';
|
|
const px = { sm: '16px', md: '24px', lg: '40px' }[size] || '24px';
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display: inline-flex; align-items: center; justify-content: center; }
|
|
.ring {
|
|
width: ${px}; height: ${px};
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--teal);
|
|
border-radius: 50%;
|
|
animation: spin .6s linear infinite;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
<div class="ring"></div>`;
|
|
}
|
|
}
|
|
customElements.define('ui-spinner', UiSpinner);
|