Flat Search Box With Loading Animation Using CSS and JavaScript

How we can create a flat search input box using CSS3? Solution: See this Flat Search Box With Loading Animation Using CSS and JavaScript.

Previously I have shared some search box programs, but this box has a flat design with a preloader or loading type animation. Basically, we use HTML <input> tag to creating the input field and <input type="submit"> or <submit> or <button> tag for creating the search button or icon. And by default, these tags have no style they are in plain HTML text and layout form. But we can give style and functions using CSS and JavaScript.

Today you will learn to create a search input box with animation. Basically, there is a search box and a submit button, I have placed an input for creating the search box, a button with an icon for submitting, and another icon for loading animation. Also, I have placed a note text for giving info on how the animation will visible. When you will focus or click on the input the color will little dark, and when you will click on the search button the loading animation will appear.

So, Today I am sharing Flat Search Box With Loading Animation Using CSS and JavaScript. There I have used CSS for complete style and used JS for loading animation values declare. This program has a flat and minimal design, that making this program beautiful. You can use this program on your website after backend integration.

If you are thinking now how this search input box actually is, then see the preview given below.

Preview Of CSS JavaScript Search Input

See this video preview to getting an idea of how this search input design looks like.

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• Animated Info Window
• CSS Upload Animation
• Responsive Pagination UI
• HTML Contact Form

Flat Search Box With Loading Animation Source Code

Before sharing source code, let’s talk about it. First I have created a div with ID name “search” inside that I have placed an input for the search box, a button for search button, and other div for place the loading animation. Now I have created another div to leave a text note. Also in the HTML file, I have linked other files like CSS and JS.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values to the elements like size, position, margin, padding, etc. Also using CSS, I have created the animation effect, focus effect, and other elements styles. There I have used the font-awesome library to place the search icon and loading icon. But used the @keyframe command to create the loading animation.

JavaScript handling here loading animation run on the action and run-time functions in this program. I have fetched elements using document.getElementById command and stored in variables. After that, I created a function for adding and removing the CSS class name to animate. Also, there is a keycode command to detect the enter key and start the animation.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating the program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS File named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Flat Search Box With Loading Animation Using CSS and JavaScript. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.