<button class="button">
	<span class="submit">Submit</span>
	<span class="loading"><i class="fa fa-refresh"></i></span>
	<span class="check"><i class="fa fa-check"></i></span>
</button>

$base-duration: 500ms;

// Colors
$color-1: #2c3e50;
$color-2: #3498db;
$color-3: #2ecc71;

// Breakpoints
$sm: new-breakpoint(min-width 320px);
$med: new-breakpoint(min-width 768px);
$lg: new-breakpoint(min-width 1024px);

*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-smooth: auto;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	// background-color:darken($color-1, 4%);
}

.hide { display: none; }

.button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 12.5rem;
	magrin: 0;
	padding: 1.5rem 3.125rem;
	background-color: $color-2;
	border: none;
	border-radius: 0.3125rem; 
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
	
	//box-shadow:
	//	0 -1.25rem 1rem -1.5rem rgba(black, 0.4),
	//	0 0.5rem 1.75rem -0.25rem rgba(black, 0.3),
	//	0 1.25rem 2.5rem rgba(black, 0.2);
	color: white;
	font-weight: 300;
	text-transform: uppercase;
	//transition: $base-duration ease;
	overflow: hidden; 
	
	&:before {
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background-color: lighten($color-3,10%);
	}
	
	span {
		position: absolute;
		line-height: 0;
		
		i {
			transform-origin: center center;
		}

		&:nth-of-type(1) {
			top: 50%;
			transform: translateY(-50%);
		}
		
		&:nth-of-type(2) {
			top: 100%;
			transform: translateY(0%);
			font-size: 24px;
		}
		
		&:nth-of-type(3) {
			display: none;
		}
	}
}

.active {
	background-color: $color-3;
	
	&:before {
		width: 100%;
		transition: width 3s linear;
	}

	span {
		
		&:nth-of-type(1) {
			top: -100%;
			transform: translateY(-50%); 
		}

		&:nth-of-type(2) {
			top: 50%;
			transform: translateY(-50%);

			i {
				animation: loading $base-duration linear infinite;
			}
		}
		
		&:nth-of-type(3) {
			display: none;
		}
	}
}

.finished {
	background-color: lighten($color-3,10%);
	
	.submit {
		display: none; 
	}
	
	.loading {
		display: none;
	}
	
	.check {
		display: block !important;
		font-size: 24px;
		animation: scale 0.5s linear;
		
		i {
			transform-origin: center center;
		}
	}
	
}

@keyframes loading {
	100% { transform: rotate(360deg); }
}

@keyframes scale {
	0%   { transform: scale(10); }
	50%  { transform: scale(0.2); }
	70%  { transform: scale(1.2); }
	90%  { transform: scale(0.7); }
	100% { transform: scale(1); }
}

const button = document.querySelector('.button');
const submit = document.querySelector('.submit');

function toggleClass() {
	this.classList.toggle('active');
}

function addClass() {
	this.classList.add('finished');
}

button.addEventListener('click', toggleClass);
button.addEventListener('transitionend', toggleClass);
button.addEventListener('transitionend', addClass);