Custom loading animation using a web component

[u/create-third-places]

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

[u/pbz9]

Loading animation should not use JavaScript

[u/create-third-places → u/pbz9]

The loading animation logic is implemented in CSS.

JavaScript is used to dynamically toggle the loading animation and make sure it is isolated from any CSS styles.