Edit on
<div class="search-box">
  <input type="text" placeholder="Search" />
  <div class="left">
    <span onclick="search()" id="search-btn"><i class="fa fa-search"></i></span>
    <div class="loading-container">
      <div id="search-loading" class="loading hide">
    </div>
    </div>
  </div>
</div>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
body {
  background:#323232;
}
.search-box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:420px;
  height:65px;
}
.search-box input {
  width:100%;
  height:100%;
  font-size:26px;
  padding:10px 22px;
  padding-right:75px;
  background:rgb(38,38,38);
  outline:none;
  border:1px solid rgba(100,100,100,0.65);
  border-radius:12px;
  color:#fff;
  font-family: 'Fredoka One', cursive;
  letter-spacing:2px;
}
.search-box input::-webkit-input-placeholder {
  color: rgba(230,230,230,0.85);
}
.search-box input::-moz-placeholder {
  color: rgba(230,230,230,0.85);
}
.search-box input:-ms-input-placeholder {
  color: rgba(230,230,230,0.85);
}
.search-box input::placeholder {
  color: rgba(230,230,230,0.85);
}

.search-box .left {
  position:absolute;
  right:0;
  top:0;
  line-height:65px;
  width:65px;
  height:65px;
  display:inline-block;
  text-align:center;
  font-size:30px;
  color:rgba(230,230,230,0.85);
}
.search-box > .left > #search-btn.hide {
  display:none;
}
.search-box > .left  #search-loading.hide {
  display:none;
} 

.loading-container {
  display:flex;
  justify-content:center;
  margin-top:50%;
  transform:translateY(-50%);
}
#search-loading {
  -webkit-animation-duration: 0.75s;
  -moz-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: rotate-forever;
  -moz-animation-name: rotate-forever;
  animation-name: rotate-forever;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  height: 32px;
  width: 32px;
  border: 5px solid #ffffff;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
}

/* Keyframes */
@-webkit-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
function search(){
  document.getElementById('search-btn').classList.add('hide');
  document.getElementById('search-loading').classList.remove('hide');
}
Rerun