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 |

📊 stock-chart-display v2.2.4

The <stock-chart-display> component renders technical stock charts using a data array of candlestick and indicator values.

🔢 Input: stockData Prop

Pass an array of objects to the stockData prop. Each object should contain the following structure: Bull and Bear base on price vs ma200 with SL and TP

const dataArray = [
  {
    date: "2025-04-07 19:00:00",
    open: 20.06,
    high: 20.39,
    low: 17.67,
    close: 18.13,
    volume: 163982700,
    MA5: 20.392,
    MA9: 21.45,
    MA10: 21.647,
    MA15: 22.482,
    MA20: 22.8635,
    MA50: 22.2332,
    MA100: 21.8667,
    MA200: 23.3118,
    RSI: 29.649264037,
    StochRSI_K: 0,
    StochRSI_D: 0.031609265,
    MACDLine: -0.7138507,
    SignalLine: -0.1025638,
    divergence: -0.6112869,
    MACDDivergence: null,
  },
  // ... more data points
];

📦 Usage

<stock-chart-display stockData="dataArray"></stock-chart-display>

🔌 Integration Guide

✅ Angular Integration

1. Register the Web Component in angular.json:

In your angular.json, add the script under scripts:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "styles": [],
      "scripts": [
        "./node_modules/lit-litelements/dist/main.js"
      ]
    }
  }
}

2. Enable Custom Elements in your Angular module:

In the module where you want to use the web component (e.g., app.module.ts), import CUSTOM_ELEMENTS_SCHEMA and add it to the schemas array:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  declarations: [
    // your components
  ],
  imports: [
    // your modules
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

✅ HTML Integration (Vanilla)

Include the component script directly:

<script
  type="module"
  src="./node_modules/lit-litelements/dist/main.js"
></script>

npm set //registry.npmjs.org/:_authToken=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