animated search box

animated-search-box.markdown

animated search box

A Pen by Arifayan Idowu Olatubosun on CodePen.

License.

index.html

<div class="container">
      <h1>Search docs...</h1>

      <div class="search-contain">
        <svg style="width:24px;height:24px" viewBox="0 0 24 24" id="search-btn">
    <path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
        <input type="text" id="search" placeholder="" />
        <p id="tip">Hit enter to search</p>
      </div>
    </div>

script.js

const searchBtn = document.querySelector("#search-btn");
      const search = document.querySelector("#search");
      const tip = document.querySelector("#tip");

      let i = 0;
      let message = "Search our docs...";
      let speed = 100;

      searchBtn.addEventListener("click", () => {
        search.style.width = "80%";
        search.style.paddingLeft = "60px";
        search.style.cursor = "text";
        search.focus();

        typeWriter();
      });

      function typeWriter() {
        if (i < message.length) {
          msg = search.getAttribute("placeholder") + message.charAt(i);
          search.setAttribute("placeholder", msg);
          i++;
          setTimeout(typeWriter, speed);
        }
      }

      search.addEventListener("keydown", () => {
        tip.classList.add("visible");
      });

style.scss

@import url('https://fonts.googleapis.com/css?family=Dosis');
$font-family: 'Dosis', sans-serif;
$color-blue: #051e38;
$color-green: #1a936f;
$color-green-light: #88d498;
$color-white: #ffffff;
$color-primary: #88d498;
$color-lighter: #f3e9d2;

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  font-family: $font-family;
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  background-image:linear-gradient(to right bottom,$color-green, $color-green-light);
}

h1 {
  color: $color-white;
  font-size: 3.5em;
}

input {
  font-family: inherit;
  background: $color-primary;
  width: 20px;
  height: 20px;
  padding: 20px;
  border-radius: 30px;
  border: none;
  color: $color-white;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 1.6em;
  transition: all 0.3s ease-in-out;

  &:focus {
    outline: none;
  }

  &::placeholder {
    color: transparentize($color-white, 0.1);
    font-size: 0.8em;
  }
  &:-ms-input-placeholder {
    color: $color-white;
    font-size: 0.8em;
  }
  &:-webkit-input-placeholder {
    color: $color-white;
    font-size: 0.8em;
  }
}

svg {
  width: 22px;
  position: absolute;
  margin: 13px 0 0 13px;
  cursor: pointer;
}

p {
  color: $color-white;
  text-transform: uppercase;
  font-size: 0.65em;
  text-align: left;
  margin-left: 60px;
  margin-top: -10px;
  visibility: hidden;
  opacity: 0;
  transition: all 300ms ease-out;
  position: absolute;
}
.container {
  text-align: center;
}

.visible {
  visibility: visible;
  margin-top: 10px;
  opacity: 1;
}

.search-contain:before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid transparent;
  transition: all 0.3s;
  position: absolute;
  animation: pulse 1s 5;
}
@keyframes pulse {
  from {
    transform: scale(1);
    border-color: $color-lighter;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}