@finapi/web-form/src/spinner.ts

Library for integrating the finAPI Web Form

export function showSpinner(target: HTMLElement): void {
  const spinnerHTML = `
    <style>
        .web-form-spinner {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .web-form-spinner [role="progressbar"] {
            width: 40px;
            height: 40px;
            display: inline-block;
            color: #00ADDF;
            animation: circular-rotate 1.4s linear infinite;
            transform-origin: 50% 50%;
        }
        @keyframes circular-rotate{ to { transform: rotate(360deg); } }
    </style>

    <div class="web-form-spinner">
      <div role="progressbar">
        <svg viewBox="22 22 44 44">
          <circle
            stroke="currentColor"
            cx="44"
            cy="44"
            r="20.2"
            fill="none"
            stroke-width="3.6"
            stroke-dasharray="80 200"
            stroke-dashoffset="0"
          >
            <animate
              attributeName="stroke-dasharray"
              values="1,200; 100, 200; 100, 200"
              begin="0s"
              dur="1.4s"
              repeatCount="indefinite"
              keyTimes="0;0.5;1"
              keySplines=".42 0 .58 1"
            />
            <animate
              attributeName="stroke-dashoffset"
              values="0; -15; -125"
              begin="0s"
              dur="1.4s"
              repeatCount="indefinite"
              keyTimes="0;0.5;1"
              keySplines=".42 0 .58 1"
            />
          </circle>
        </svg>
      </div>
    </div>
  `;
  target.innerHTML = spinnerHTML;
}

export function removeSpinner(ownerDocument: Document): void {
  const targetDocument = ownerDocument;
  const spinner = targetDocument.querySelector(".web-form-spinner");

  if (spinner) {
    spinner.parentNode.removeChild(spinner);
  }
}