Lit Web Components — Loading Spinner & Stock Chart Display

This package includes two customizable web components built with Lit:

🚀 Loading Spinner Component

You can integrate customizable loading spinners using the <loading-spinner-element> component, combining designs from:

• CSS Loaders
• Loading.io

🔧 Usage

<loading-spinner-element></loading-spinner-element>

🧩 Available Properties

| Property | Type | Default | Description | | ----------------- | ------- | ---------- | -------------------------------------------------------- | | name | string | spinner1 | Choose a spinner from spinner1 to spinner11. | | size | string | 64px | Optional. Set the size of the spinner. | | backgroundColor | string | — | Optional. Background color behind the spinner animation. | | center | boolean | false | If present, the spinner is centered on the page. |

💡 Examples

<!-- Default spinner | spinner1  | `lds-dual-ring`   -->
<loading-spinner-element></loading-spinner-element>

<!-- Centered loader-sent-email -->
<loading-spinner-element center name="spinner11" ></loading-spinner-element>

<!-- Centered red spinner with custom size -->
<loading-spinner-element center name="spinner10" style="color: red;" size="100px"></loading-spinner-element>

<!-- Full config with white background -->
<loading-spinner-element center name="spinner11" style="color: red;" size="100px" backgroundColor="white"></loading-spinner-element>

🎨 Spinner Options

| Name | Class Name | | --------- | ---------------------- | | spinner1 | lds-dual-ring | | spinner2 | lds-circle | | spinner3 | loader | | spinner4 | lds-hourglass | | spinner5 | loader-3rd | | spinner6 | loader-ying-yang | | spinner7 | loader-in-out-circle | | spinner8 | loader-arrow | | spinner9 | loader-jump-stair | | spinner10 | loader-yin-yang-2 | | spinner11 | loader-sent-email |