DocsAllOver Animated Search Bar with CSS and JS Snippets

Animated Search Bar with CSS and JS

Oct. 23, 2024

HTML, CSS, Js, Clean UI, Animation, Search Bar

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Animated Search Box</title>
    <link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'>
</head>

<body>
    <div class="search-box">
        <input type="text" placeholder="Type to search..">
        <div class="search-icon">
            <i class="fas fa-search"></i>
        </div>
        <div class="cancel-icon">
            <i class="fas fa-times"></i>
        </div>
        <div class="search-data">
        </div>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
</body>

</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #eee;
}

::selection {
    color: #fff;
    background: #664AFF;
}

.search-box {
    position: relative;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, .2);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.search-box.active {
    width: 350px;
}

.search-box input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50px;
    background: #fff;
    outline: none;
    padding: 0 60px 0 20px;
    font-size: 18px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.search-box input.active {
    opacity: 1;
}

.search-box input::placeholder {
    color: #a6a6a6;
}

.search-box .search-icon {
    position: absolute;
	padding-top: 1rem;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: 60px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    color: #664AFF;
    cursor: pointer;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.search-box .search-icon.active {
    right: 5px;
    height: 50px;
    line-height: 50px;
    width: 50px;
    font-size: 20px;
    background: #664AFF;
    color: #fff;
    transform: translateY(-50%) rotate(360deg);
}

.search-box .cancel-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.search-box .cancel-icon.active {
    right: -40px;
    transform: translateY(-50%) rotate(360deg);
}

.search-box .search-data {
    text-align: center;
    padding-top: 7px;
    color: #fff;
    font-size: 18px;
    word-wrap: break-word;
}

.search-box .search-data.active {
    display: none;
}

const searchBox = document.querySelector(".search-box");
const searchBtn = document.querySelector(".search-icon");
const cancelBtn = document.querySelector(".cancel-icon");
const searchInput = document.querySelector("input");
const searchData = document.querySelector(".search-data");
searchBtn.onclick = () => {
    searchBox.classList.add("active");
    searchBtn.classList.add("active");
    searchInput.classList.add("active");
    cancelBtn.classList.add("active");
    searchInput.focus();
    if (searchInput.value != "") {
        var values = searchInput.value;
        searchData.classList.remove("active");
        searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
    } else {
        searchData.textContent = "";
    }
}
cancelBtn.onclick = () => {
    searchBox.classList.remove("active");
    searchBtn.classList.remove("active");
    searchInput.classList.remove("active");
    cancelBtn.classList.remove("active");
    searchData.classList.toggle("active");
    searchInput.value = "";
}

This snippet creates a visually appealing and interactive search bar with smooth animations and a modern design. The search bar features a placeholder text, a magnifying glass icon, and a clear button. When the user clicks on the search bar or starts typing, the placeholder text disappears, and the magnifying glass icon becomes active.

Key Features:

Responsive Design: The search bar adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the search bar using CSS to match your website's design and branding.
Animations: The search bar incorporates smooth animations, such as the placeholder text fading out and the magnifying glass icon appearing when the user focuses on the input field.
Clear Button Functionality: A clear button allows users to easily erase their search query.
Event Handling: JavaScript is used to handle the focus, blur, and input events, triggering the necessary animations and functionality.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the search bar, including the input field, magnifying glass icon, and clear button.
Apply CSS Styles: Use CSS to style the search bar, including its background color, border, font size, and animations. Customize the appearance to match your website's design.
Add JavaScript Functionality: Implement JavaScript code to handle the focus, blur, and input events. Trigger the animations and update the search query based on user input. You can also add functionality to submit the search query when the user presses the Enter key.

Latest Snippets

View All