button
| Submit
p
| Inspired by this
a href='https://dribbble.com/shots/2166815-Button-Loading-Animation-with-Framer?list=shots&sort=popular&timeframe=now' target='_blank'
| Dribbble
| post.
View Compiled
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #2576d1;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: none;
line-height: 60px;
width: 200px;
border-radius: 10px;
color: #2576d1;
outline: none;
letter-spacing: 1px;
transition: all 0.5s;
&:after {
content: '';
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: -10%;
left: -10%;
transform: translateX(-50%) rotate(45deg);
transform-origin: 35px 35px;
opacity: 0;
transition: opacity 0.3s 0.2s;
}
&.loading {
width: 60px;
border-radius: 50%;
&:after {
opacity: 1;
}
}
@for $i from 1 through 100 {
&.percent-#{$i}:after {
transform: rotate($i / 100 * 360deg + 45deg);
}
}
&.finished {
background-color: #16ba9a;
width: 120px;
border-radius: 10px;
color: #fff;
&:before {
font-size: 24px;
content: "✓";
opacity: 1;
transform: translateY(0px);
animation: dropDown 0.3s 1 cubic-bezier(0.64, 0.57, 0.67, 3);
}
}
}
@keyframes dropDown {
0% {
transform: translateY(-15px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
p {
color: #fff;
margin: 10px;
a {
color: #16ba9a;
}
}
View Compiled
var btn = document.querySelector("button");
var i = 0;
btn.onclick = function() {
this.innerText = i;
this.classList.remove("finished");
this.classList.add("loading");
var inter = setInterval(function() {
btn.innerText = i++;
btn.classList.remove('percent-' + (i - 1));
btn.classList.add('percent-' + i);
if (i === 100) {
btn.classList.remove("loading");
btn.classList.add("finished");
btn.innerText = '';
clearInterval(inter);
i = 0;
btn.classList.remove('percent-100');
}
}, 25);
}
This Pen doesn't use any external JavaScript resources.