Submit Buttons with Built-in Loading Indicator

index.jade

button(type='submit') Go

script.js

$(document).ready(function() {
	var $button = $('button[type="submit"]');
	
	$button.on('click', function() {
		var $this = $(this);
		if($this.hasClass('active') || $this.hasClass('success')) {
			return false;
		}
		$this.addClass('active');
		setTimeout(function() {
			$this.addClass('loader');
		}, 130);
		setTimeout(function() {
			$this.removeClass('loader active');
			$this.html('Success');
			$this.addClass('success animated pulse');
		}, 1600);
		setTimeout(function() {
			$this.html('Go');
			$this.removeClass('success animated pulse');
			$this.blur();
		}, 2900);
	});
	
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

$buttonColor: #FF5126;
$backgroundColor: #DAEBEE;
$successColor: #3BB873;
	
@mixin dimensions($width: null, $height: $width) { width: $width; height: $height; }
%reset { margin: 0; padding: 0; }
%flex { display: flex; justify-content: center;	align-items: center; }
*, *:before, *:after { box-sizing: border-box; }

html,
body {
	@include dimensions($width: 100%);
	@extend %reset;
	font-family: 'Assistant', sans-serif;
}

body {
	@extend %reset;
	@extend %flex;
	@include dimensions($width:100%);
	overflow: hidden;
	background: $backgroundColor;
	background-size: 20px 20px;
}

button[type="submit"] {
	@extend %flex;
	@include dimensions($width: 100px, $height: 50px);
	background: transparent;
	border-radius: 10px;
	will-change: transform;
	transition: all .2s ease;
	border: 2px solid $buttonColor;
	cursor: pointer;
	color: #ffffff;
	font-size: 16px;
	color: $buttonColor;
	outline: none;
	text-align: center;
	
	&:hover {
		background: $buttonColor;
		color: #ffffff;
	}
	&:active {
		font-size: 15px;
		transform: translateY(1px);
	}
	&.active {
		font-size: 0;
		border-radius: 25px;
		width: 50px;
		background: transparent;
	}
	&.loader {
		border-right: 2px solid #ffffff;
		animation: loader .3s linear infinite;
	}
	&.success {
		background: $successColor;
		border-color: $successColor;
		font-size: 14px;
		color: #ffffff;
	}
}

@keyframes loader {
	0% {
		transform: rotateZ(0);
	}
	100% {
		transform: rotateZ(360deg);
	}
}

styles

<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />

submit-buttons-with-built-in-loading-indicator.markdown

Submit Buttons with Built-in Loading Indicator

Submit Buttons with Built-in Loading Indicator

A Pen by Elior Shalev Tabeka on CodePen.

License.