Posted By
Bajarangi soft ,
Posted On 27-11-2020
Complete Code For Create Icon Tab Bar Active Animation Using CSS.
<!DOCTYPE html>
<html>
<head>
<title>How To Create Icon Tab Bar Active Animation Using CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<style>
body {
background: lightblue;
font-family: "Roboto Light";
}
.active {
font-size: 20px;
}
.tabs {
width: 100%;
height: 400px;
background: #f5f5f5;
/*padding: 20px 30px;*/
overflow: hidden;
box-shadow: 5px 10px 5px #ccc;
}
.tabs .tab-header {
background: black;
display: flex;
height: 60px;
}
.tab-header > div {
width: 24px;
height: 24px;
margin: auto;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
i.fa {
display: inline-block;
border-radius: 60px;
box-shadow: 0px 0px 2px #888;
padding: 0.5em 0.6em;
background: white;
/*font-size: 41px;*/
position: absolute;
bottom: 65%;
}
.tabs .tab-header > div {
width: calc(32% / 4);
text-align: center;
color: white;
font-weight: 600;
cursor: pointer;
margin: auto;
/*font-size: 30px;*/
text-transform: uppercase;
outline: none;
color: yellowgreen;
}
.tabs .tab-header > div > i {
display: block;
margin-bottom: 5px;
}
.tabs .tab-header > div.active {
color: #00acee;
font-size: 40px;
}
.tabs .tab-indicator {
position: relative;
width: calc(100% / 4);
height: 5px;
background: #00acee;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabs .tab-body {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
border: 1px solid black;
}
.tabs .tab-body > div {
position: absolute;
top: -200%;
opacity: 0;
transform: scale(0.9);
transition: opacity 500ms ease-in-out 0ms,
transform 500ms ease-in-out 0ms;
}
.tabs .tab-body > div.active {
top: 0px;
padding: 30px;
opacity: 1;
transform: scale(1);
}
</style>
<body>
<br/><br/>
<div class="container">
<br>
<div class="text-center">
<h1 id="color" style="color: black;">Create Icon Tab Bar Active Animation Using CSS</h1>
</div>
<br><br><br>
<div class="tabs">
<div class="top">
<div class="tab-header">
<div class="active">
<i class="fa fa-home"></i>
</div>
<div>
<i class="fa fa-edit"></i>
</div>
<div>
<i class="fa fa-bar-chart"></i>
</div>
<div>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
<div class="tab-indicator"></div>
<div class="tab-body">
<div class="active">
<h2>This is Tab1 section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat
nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit
perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is Tab2 section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem
fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt
quaerat ut ducimus?</p>
</div>
<div>
<h2>This is Tab3 section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem
fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt
quaerat ut ducimus?</p>
</div>
<div>
<h2>This is Tab4 section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem
fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt
quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function () {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabBody.getElementsByClassName("active")[0].classList.remove("active");
tabBody.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 4) * ${i})`;
});
}
</script>