Function addLoadingAnimation

scripts/magnify_image.js:1211–1253

(
  element,
  size = Math.min(element?.clientWidth, element?.clientHeight) || 0,
  customStyle = ""
)

  return () => ele.remove();
}
function addLoadingAnimation(
  element,
  size = Math.min(element?.clientWidth, element?.clientHeight) || 0,
  customStyle = ""
) {
  let id = Math.random().toString(36).substr(2, 9);
  element.classList.add("ufs-loading-" + id);

  let borderSize = 4;

  // inject css code
  let style = document.createElement("style");
  style.id = "ufs-loading-style-" + id;
  style.textContent = `
    .ufs-loading-${id}::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: ${size}px;
      height: ${size}px;
      margin-top: -${size / 2}px;
      margin-left: -${size / 2}px;
      border-radius: 50%;
      border: ${borderSize}px solid #555 !important;
      border-top-color: #eee !important;
      animation: ufs-spin 1s ease-in-out infinite;
      box-sizing: border-box !important;
      ${customStyle}
    }
    @keyframes ufs-spin {
      to {
        transform: rotate(360deg);
      }
    }
    `;
  (document.head || document.documentElement).appendChild(style);

  return () => {
    if (element) element.classList.remove("ufs-loading-" + id);
  };
}
function addEventListener(target, event, callback, options) {
  target.addEventListener(event, callback, options);
  return () => target.removeEventListener(event, callback, options);