|
/**
|
|
* @fileoverview Loading Spinner Component for Rantii
|
|
* @author retoor <retoor@molodetz.nl>
|
|
* @description Animated loading indicator for async operations
|
|
* @keywords loading, spinner, animation, progress, indicator
|
|
*/
|
|
|
|
import { BaseComponent } from './base-component.js';
|
|
|
|
class LoadingSpinner extends BaseComponent {
|
|
static get observedAttributes() {
|
|
return ['size', 'text'];
|
|
}
|
|
|
|
init() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
const size = this.getAttr('size') || 'medium';
|
|
const text = this.getAttr('text') || '';
|
|
|
|
this.addClass('spinner', `spinner-${size}`);
|
|
|
|
this.setHtml(`
|
|
<div class="spinner-circle">
|
|
<div class="spinner-inner"></div>
|
|
</div>
|
|
${text ? `<span class="spinner-text">${text}</span>` : ''}
|
|
`);
|
|
}
|
|
|
|
onAttributeChanged(name, oldValue, newValue) {
|
|
this.render();
|
|
}
|
|
|
|
setText(text) {
|
|
this.setAttr('text', text);
|
|
}
|
|
|
|
setSize(size) {
|
|
this.setAttr('size', size);
|
|
}
|
|
}
|
|
|
|
customElements.define('loading-spinner', LoadingSpinner);
|
|
|
|
export { LoadingSpinner };
|