css active tab animation indicator

How we can create an active tab slider with icons using HTML, CSS, & JS? Solution: CSS Active Tab Animation With Icons, Animated Active Tab Slider Indicator.

I am sure that you know what is HTML tab, Previously I have shared Pure CSS tab you can check that. This is an animated design of tab, I did not put any matter in the tabs all are blank. Basically, Tabs are perfect for single-page web applications, or for displaying different subjects in less area.

Today you will learn to create an Animated Active Tab Slider with Indicator. When you will click on any tab A line will indicate the currently active tab with a little animation. These all are blank tabs you can put the matters according to your requirement. I think this post will be very useful to learn and improve your HTML, CSS, & JS Skills.

So, Today I am sharing CSS Active Tab Animation With Icons. With HTML & CSS I have used jQuery for creating the active tab slider indicator. This tab looks like an app’s bottom navbar because of its UI. jQuery is JavaScript library & that’s why I am putting this on JS category. You can say this a Tabs and Active Page Highlight combination because I have used features of these together.

If you are thinking now how this active tab slider actually is, Then see the preview given below.

Preview Of Active Tabs Slider Highlight

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

Now you can see this visually. If you like this, then get the source code of its.

You May Also Like:

CSS Active Tab Animation With Icons Source Code

Before sharing source code, let’s talk about it. I have created this tab using HTML lists <ul> and <li>  and also put a span on each li for icon. All the icons are from inearicons, I have used this because of minimal icons. In the CSS file, I have placed all the elements in the right place.

As you can see on the preview there is an indicator of the active tab. For the active class, I have used icons color red and put a line on top also with red color. Now the jQuery work as remove active class for the previous tab and shift into the currently active tab. Basically, jQuery put the active class on the tab which you have clicked currently.

The line shift with an animation effect, for this I used CSS @keyframes for creating this. First I put line’s width .6rem  then 3rem now the actual size. The whole keyframe looks like this: @keyframes moveActive { 0% {width:.6rem;} 20%{width: 3rem;}100% {width: 1.5rem;} } .

There are left many basic commands, I can’t explain all in writing. You will understand easily after getting the codes. for creating this animated tab program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

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

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

function.js

The final step, Create a JS file for jQuery named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created CSS Active Tab Animation With IconsAnimated Active Tab Slider Highlight or Indicator. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here