Would like have a better friendly style of LoadingSpinner

[Quineone]

Describe the bug Instead of set the loading spinner for img tag

.${this.className}.loading {
  background-image: url(${this.#dataUri});
  background-repeat: no-repeat;
  background-position: center;
  background-size: ${this.#size};
  background-color: ${this.#backgroundColor};
 }

would like to set this for the img's pseudo-elements :before or :after

.${this.className}.loading:after {
  background-image: url(${this.#dataUri});
  background-repeat: no-repeat;
  background-position: center;
  background-size: ${this.#size};
  background-color: ${this.#backgroundColor};
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 }

[ThornWalli]

Hello @Quineone,

currently the LoadingSpinner in the component SpeedkitImage used as background. This is the reason because otherwise the <img /> needs a container to use a pseudo element.

The only alternative I see is to use different LoadingSpinner in SpeedkitPicture and SpeedkitImage and integrate the LoadingSpinner in SpeedkitPicture and disable it in the embedded SpeedkitImage.

In this case theLoadingSpinner must be extended by a selector customization.

[Quineone]

Hi @ThornWalli , thx, indeed, that's would be better.