SVG анимация на кнопке

Question

Я создаю анимацию на кнопке с помощью SVG, чтобы сделать анимацию, которую я использую .is-loading и is.success, при нажатии на кнопку анимация не выполняется, и я не могу определить, какая ошибка в анимации.

вот код javascript. См. Ниже.

var nome = document.getElementById("campo_nome");
var altura = document.getElementById("campo_altura");
var peso = document.getElementById("campo_peso");
const resultado = document.getElementById("campo_enviar");

resultado.addEventListener('click', function btn ()  {
  resultado.classList.add('is-loading');

  setTimeout( () => {
    resultado.classList.add('is-success');
    resultado.classList.remove('is-loading');
    resultado.removeEventListener('click', btn);
  }, 4000);
});

вот код css. См. Ниже.

.btn_enviar{
  position: absolute;
  top: 5px;
  right: 110px;
  background: none;
  color: #000;
  border: 1px solid #45981B;
  border-radius: 40px;
  box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);
  cursor: pointer;
  height: 45px;
  width: 10px;
  outline: none;
  padding: 15px 70px;
  transition: background, padding 500ms ease-in-out;
}
span{
  font-size: 15px;
  position: absolute;
  top: 12px;
  left: 36px;
}
.btn_enviar.is-loading {
  animation: pulse 1.5s infinite;
  padding: 15px 7px;
}
.btn_enviar.is-success {
  background: #45981B;
  padding: 15px 7px;
}

svg {
  width: 0;
  height: 0;
}

.is-success svg {
  height: 30px;
  width: 30px;
}

.check {
  stroke-dasharray: 130px 130px;
  stroke-dashoffset: 130px;
  transition: stroke-dashoffset 500ms ease-in-out;
}

.is-loading span,
.is-success span {
  display: none;
}

.is-success .check {
  stroke-dashoffset: 0px;
}

@keyframes pulse {
  0% {
    transform: scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);
  }
  100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);
  }
}

и вот код HTML, где находятся кнопка и SVG. См. Ниже.

<form class="formulario_btn">
<button type="button" class="btn_limpar" class="btn_limpar"> Limpar </button>
<button type="button" class="btn_enviar" class="btn_enviar">
   <svg viewBox="0 0 90.594 59.714">
    <polyline
      class="check"
      fill="none"
      stroke="#FFFFFF"
      stroke-width="10"
      stroke-miterlimit="10"
      points="1.768,23.532 34.415,56.179 88.826,1.768"
    />
  </svg>
  <span> Resultado </span>  
</button>

Answer 1

У вас нет элемента с идентификатором campo_enviar, но в вашем javascript вы упомянули это. Смотрите фрагмент, который показывает вашу ошибку

var nome = document.getElementById("campo_nome");
var altura = document.getElementById("campo_altura");
var peso = document.getElementById("campo_peso");
const resultado = document.getElementById("campo_enviar");

resultado.addEventListener('click', function btn ()  {
  resultado.classList.add('is-loading');

  setTimeout( () => {
    resultado.classList.add('is-success');
    resultado.classList.remove('is-loading');
    resultado.removeEventListener('click', btn);
  }, 4000);
});

.btn_enviar{
  position: absolute;
  top: 5px;
  right: 110px;
  background: none;
  color: #000;
  border: 1px solid #45981B;
  border-radius: 40px;
  box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);
  cursor: pointer;
  height: 45px;
  width: 10px;
  outline: none;
  padding: 15px 70px;
  transition: background, padding 500ms ease-in-out;
}
span{
  font-size: 15px;
  position: absolute;
  top: 12px;
  left: 36px;
}
.btn_enviar.is-loading {
  animation: pulse 1.5s infinite;
  padding: 15px 7px;
}
.btn_enviar.is-success {
  background: #45981B;
  padding: 15px 7px;
}

svg {
  width: 0;
  height: 0;
}

.is-success svg {
  height: 30px;
  width: 30px;
}

.check {
  stroke-dasharray: 130px 130px;
  stroke-dashoffset: 130px;
  transition: stroke-dashoffset 500ms ease-in-out;
}

.is-loading span,
.is-success span {
  display: none;
}

.is-success .check {
  stroke-dashoffset: 0px;
}

@keyframes pulse {
  0% {
    transform: scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);
  }
  100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);
  }
}

<form class="formulario_btn">
<button type="button" class="btn_limpar" class="btn_limpar"> Limpar </button>
<button type="button" class="btn_enviar" class="btn_enviar">
   <svg viewBox="0 0 90.594 59.714">
    <polyline
      class="check"
      fill="none"
      stroke="#FFFFFF"
      stroke-width="10"
      stroke-miterlimit="10"
      points="1.768,23.532 34.415,56.179 88.826,1.768"
    />
  </svg>
  <span> Resultado </span>  
</button>