This is web-component using lit

loading spinner

get data form https://cssloaders.github.io/
and https://loading.io/css/

and combine to a component call 

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

This element have 4 property:
1. name : by default will be spinner1, option spinner1 to spinner11
2. size : size for some loader, default 64px
3. backgroundColor: the color background of the spinner
4. center: to make the spinner in the center of page or not

- ex:
      <loading-spinner-element center name="spinner11" style="color: red;"></loading-spinner-element>
      <loading-spinner-element center name="spinner11" style="color: red;" size="100px"></loading-spinner-element>
      <loading-spinner-element center name="spinner11" style="color: red;" size="100px" backgroundColor="white"></loading-spinner-element>

stock-chart-display 2.1.4

stock-chart-display take the prop as array

  dataArray=[
      {
        "volume": 12394766,
        "open": 7.73,
        "close": 6.69,
        "high": 7.73,
        "low": 6.3,
        "date": "2024-10-24T04:00:00.000Z",
        "MA5": 9.9,
        "MA10": 9.9,
        "MA20": 9.9,
        "MA50": 10.24,
        "MA100": 11.54,
        "MA200": 18.52,
        "RSI": 24.150554856423767,
        "MACDLine": -0.11134615384615287,
        "SignalLine": -0.30238750431044953,
        "MACDHistogram": 0.19104135046429666
      },
  ]
  <stock-chart-display stockData=dataArray>

Integrate

angular

add to angular.json
"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "styles": [
        ],
        "scripts": [

          "./node_modules/lit-litelements/dist/main.js"
        ]
      }
    }
}

html

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