Custom loading animation using a web component

I built a custom loading animation using a web component. It takes an image, lays out 8 copies of in a circle with increasing size, and then rotates it.

To use the component, load it in a script with the following code.

import { LoadingIndicatorComponent } from "./shared/components/LoadingIndicatorComponent.js"; //Replace with path to component. customElements.define( "loading-indicator-component", LoadingIndicatorComponent ); 

The loading animation can then be added to the DOM with the following HTML.

<loading-indicator-component image-path="/assets/images/meeple_small.png" //Replace with path to image. > 

The loading animation was placed inside a shadow DOM web component with 0 dependencies. My intention is for developers to be able to copy and paste the component into their own websites. Source code for the component is located here. https://codeberg.org/createthirdplaces/DMVBoardGames/src/branch/main/src/shared/components/LoadingIndicatorComponent.js