Spaces:

amghsa
/

chessmaster-pro-tracker

Running

chessmaster-pro-tracker / components /loading-spinner.js

import { useState, useEffect } from 'react';

1763642 verified 12 months ago

847 Bytes

class LoadingSpinner extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .spinner {
                    animation: spin 1s linear infinite;
                    width: 2rem;
                    height: 2rem;
                    border: 0.25rem solid rgba(59, 130, 246, 0.2);
                    border-top-color: rgb(59, 130, 246);
                    border-radius: 50%;
                }
                
                @keyframes spin {
                    to { transform: rotate(360deg); }
                }
            </style>
            <div class="flex justify-center items-center">
                <div class="spinner"></div>
            </div>
        `;
    }
}

customElements.define('loading-spinner', LoadingSpinner);

	class LoadingSpinner extends HTMLElement {
	connectedCallback() {
	this.attachShadow({ mode: 'open' });
	this.shadowRoot.innerHTML = `
	<style>
	.spinner {
	animation: spin 1s linear infinite;
	width: 2rem;
	height: 2rem;
	border: 0.25rem solid rgba(59, 130, 246, 0.2);
	border-top-color: rgb(59, 130, 246);
	border-radius: 50%;
	}

	@keyframes spin {
	to { transform: rotate(360deg); }
	}
	</style>
	<div class="flex justify-center items-center">
	<div class="spinner"></div>
	</div>
	`;
	}
	}

	customElements.define('loading-spinner', LoadingSpinner);