#search
  input#input(placeholder="Search...")
  button#button: i.fa.fa-search
  .spinner: i.fa.fa-spinner
  
.note Click the button or hit enter.

$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)

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