Function defineProgressElement

client-src/progress.js:13–238

()

 * @returns {void}
 */
export function defineProgressElement() {
  if (customElements.get("wds-progress")) {
    return;
  }

  class WebpackDevServerProgress extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.maxDashOffset = -219.99078369140625;
      this.animationTimer = null;
    }

    #reset() {
      clearTimeout(this.animationTimer);
      this.animationTimer = null;

      const typeAttr = this.getAttribute("type")?.toLowerCase();
      this.type = typeAttr === "circular" ? "circular" : "linear";

      const innerHTML =
        this.type === "circular"
          ? WebpackDevServerProgress.#circularTemplate()
          : WebpackDevServerProgress.#linearTemplate();
      /** @type {ShadowRoot} */
      (this.shadowRoot).innerHTML = innerHTML;

      const progressValue = this.getAttribute("progress");
      this.initialProgress = progressValue ? Number(progressValue) : 0;

      this.#update(this.initialProgress);
    }

    static #circularTemplate() {
      return `
        <style>
        :host {
            width: 200px;
            height: 200px;
            position: fixed;
            right: 5%;
            top: 5%;
            pointer-events: none;
            transition: opacity .25s ease-in-out;
            z-index: 2147483645;
        }

        circle {
            fill: #282d35;
        }

        path {
            fill: rgba(0, 0, 0, 0);
            stroke: rgb(186, 223, 172);
            stroke-dasharray: 219.99078369140625;
            stroke-dashoffset: -219.99078369140625;
            stroke-width: 10;
            transform: rotate(90deg) translate(0px, -80px);