<div class="editor-indicator" data-state="EMPTY">
  <span class="editor-indicator-text"></span>
  <svg viewBox="0 0 100 100" class="icon">
    <path d="M0, 20 Q50, 20 100, 20"></path>
    <path d="M0, 40 Q50, 40 100, 40"></path>
    <path d="M0, 60 Q50, 60 100, 60"></path>
    <path d="M0, 80 Q50, 80 100, 80"></path>
  </svg>
</div>

.editor-indicator {
  
  --blue: #0ebeff;
  --green: #ae63e4;
  --yellow: #ffdd40;
  --purple: #47cf73;
  --red: red;
  
  &[data-state="EMPTY"] {
    .editor-indicator-text {
      display: none;
    }
  }
  &[data-state="ACTIVE"] {
    --glow-color: var(--blue);
    .icon {
      animation: logspin 1.5s linear infinite,
        logglow 1.25s ease infinite alternate;
      border-radius: 50%;
      path {
        stroke-width: 25;
      }
      :nth-child(1) {
        stroke: var(--blue);
        d: path("M50, 0 Q95, 5 100,50");
      }
      :nth-child(2) {
        stroke: var(--green);
        d: path("M100, 50 Q95, 95 50,100");
      }
      :nth-child(3) {
        stroke: var(--yellow);
        d: path("M50,100 Q5, 95 0, 50");
      }
      :nth-child(4) {
        stroke: var(--purple);
        d: path("M0, 50 Q5, 5 50, 0");
      }
    }
  }
  &[data-state="SUCCESS"] {
    .icon {
      :nth-child(1) {
        stroke: #70cc7c;
        stroke-width: 18;
        d: path("M25, 60 Q35, 69 62, 98");
      }
      :nth-child(2) {
        stroke: #70cc7c;
        stroke-width: 18;
        d: path("M50, 99 Q70, 80 100, 20");
      }
      :nth-child(3) {
        opacity: 0;
      }
      :nth-child(4) {
        opacity: 0;
      }
    }
  }
  &[data-state="ERROR"] {
    --glow-color: red;
  
    .icon {
      animation: logglow 1.25s ease infinite alternate;
      border-radius: 50%;
      padding: 5px;
      :nth-child(1) {
        stroke: red;
        stroke-width: 14;
        d: path("M40, 0 Q39, 60 50, 70");
      }
      :nth-child(2) {
        stroke: red;
        stroke-width: 20;
        d: path("M33, 0 Q50, 0 67, 0");
      }
      :nth-child(3) {
        stroke: red;
        stroke-width: 14;
        d: path("M60, 0 Q59, 60 50, 70");
      }
      :nth-child(4) {
        stroke: red;
        stroke-width: 24;
        stroke-linecap: round;
        d: path("M50, 93 Q50, 95 50, 98");
      }
    }
  }
}

.icon {
  width: 24px;
  height: 24px;
  overflow: visible;
  display: block;
  path {
    fill: none;
    stroke-width: 8;
    stroke: white;
    transition: 0.4s;
  }
}

@keyframes logspin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes logglow {
  100% {
    box-shadow: 0 0 8px 4px var(--glow-color);
  }
}

* {
  box-sizing: border-box;
}
body {
  background: #2d3039;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

const indicator = document.querySelector(".editor-indicator");

let currentState = indicator.dataset.state;

indicator.addEventListener("click", () => {
  let nextState = "";

  if (currentState == "EMPTY") {
    nextState = "ACTIVE";
  } else if (currentState == "ACTIVE") {
    nextState = "SUCCESS";
  } else if (currentState == "SUCCESS") {
    nextState = "ERROR";
  } else {
    nextState = "EMPTY";
  }
  
  indicator.dataset.state = nextState;
  currentState = nextState;
});