Currently, I am working on an animation for a button using SVG. The animation utilizes the classes .is-loading and .is-success. However, when I click on the button, the animation does not execute as expected. I'm having trouble identifying the error within the animation.
Below is the JavaScript code:
var name = document.getElementById("nome_field");
var height = document.getElementById("height_field");
var weight = document.getElementById("weight_field");
const result = document.getElementById("submit_field");
result.addEventListener('click', function btn () {
result.classList.add('is-loading');
setTimeout( () => {
result.classList.add('is-success');
result.classList.remove('is-loading');
result.removeEventListener('click', btn);
}, 4000);
});
Here is the corresponding CSS code:
.submit_btn{
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;
}
.submit_btn.is-loading {
animation: pulse 1.5s infinite;
padding: 15px 7px;
}
.submit_btn.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);
}
}
Finally, here is the HTML code that contains the button and SVG elements:
<form class="form_submit">
<button type="button" class="btn_clear" class="btn_limpar"> Clear </button>
<button type="button" class="submit_button" 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> Result </span>
</button>