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);
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.