#search
	input#input(placeholder="Search...")
	button#button: i.fa.fa-search
	.spinner: i.fa.fa-spinner
	
.note Click the button or hit enter.
View Compiled
$color: #974fe4
$color-dark: darken(desaturate($color, 10), 5)
$font-size: 30px
$icon-size: 30px
$width-input: 500px
$border-radius: 10px
$transition: all 0.5s

// Reset
*
	box-sizing: border-box
	margin: 0
	padding: 0
	-webkit-font-smoothing: antialiased


// Rules

body
	align-items: center
	background: $color
	color: #fff
	display: flex
	font: #{$font-size}/1.375 'Lato', arial, sans-serif
	flex-flow: column nowrap
	height: 100vh
	justify-content: center
	width: 100vw

.note
	font-size: 0.375em
	font-weight: bold
	text-transform: uppercase
	color: darken($color-dark, 15)

#search
	align-items: center
	background: $color-dark
	border-radius: $border-radius
	display: flex
	justify-content: space-between
	margin: 0.5em 0
	padding: 0.5em 0.5em 0.5em 1em
	transition: $transition
	width: $width-input

	&:hover,
	&:focus
		background: darken($color-dark, 2)
	
	button,
	input
		appearance: none
		background: transparent
		border: 0
		color: inherit
		font: inherit
		outline: 0

	button
		cursor: pointer
		padding: 0 0.25em

	input
		flex: 1

		&::placeholder
			color: #fff

	.spinner
		animation: spinner 1s infinite linear
		display: none
		padding: 0 0.25em
		
#search.loading
	button
		display: none

	.spinner
		display: block


// Animation

@keyframes spinner
	0%
		transform: rotate(0deg)

	100%
		transform: rotate(360deg)
View Compiled
var search = document.getElementById('search');
var button = document.getElementById('button');
var input = document.getElementById('input');

function loading() {
	search.classList.add('loading');
	
	setTimeout(function() {
		search.classList.remove('loading');
	}, 1500);
}

button.addEventListener('click', loading);

input.addEventListener('keydown', function() {
	if(event.keyCode == 13) loading();
});
Run Pen

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.