<div class="container">
<button class="btn" onclick="change()">
<span class="text">Submit</span>
</button>
</div>
.container {
height: 400px;
width: 400px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
}
.btn {
width: 300px;
height: 60px;
border-radius: 40px;
border: 2px solid red;
background-color: #fff;
color: red;
outline: none;
cursor: pointer;
}
.container.active .btn {
animation: animate-line 0.3s ease-in, spinner 0.5s infinite;
animation-delay: 0.1s, 0.5s;
-webkit-animation-fill-mode: forwards;
}
.container.active .text {
display: none;
font-size: 20px;
}
@keyframes animate-line {
0% {
width: 300px;
}
100% {
width: 60px;
border-bottom-color: transparent;
border-right-color: transparent;
}
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
View Compiled
function change() {
document.querySelector(".container").classList.toggle("active")
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.