Designing a hexagon-shaped loading animation with CSS is a attractive way to keep your visitors entertained as they wait for your website to load. In this guide, we’ll show you how to build this cool animation from scratch.
Step1: HTML Structure For Hexagon
This HTML segment establishes a structured layout within a container, featuring three nested divisions. Each contains a pair of spans tagged with dual classes, likely signifying distinct styling or functional roles to create a visually organized display.
<section class="container"> <div> <div> <span class="one h6"></span> <span class="two h3"></span> </div> </div> <div> <div> <span class="one h1"></span> <span class="two h4"></span> </div> </div> <div> <div> <span class="one h5"></span> <span class="two h2"></span> </div> </div> </section>
Step2: Hexagon Loader with CSS Animations
This CSS code defines a full-page layout with a hexagon-shaped loading animation at the center. Through a combination of absolute positioning and carefully timed keyframe animations, it creates a captivating visual effect where bars within each segment of the hexagon grow and shrink in sequence, simulating a loading process.
html,
body{
padding:0;
margin:0;
width:100%;height:100%;
display:flex;
justify-content:center;
align-items:center;
background:#ec8f18;
}
.container{
display:flex;
justify-content:center;
align-items:center;
}
div{
position:absolute;
width:90px;height:51px;
}
div:nth-of-type(2){transform:rotate(60deg)}
div:nth-of-type(3){transform:rotate(-60deg)}
div div{width:100%;height:100%;position:relative}
div div span{
position:absolute;
width:4px;height:0%;
background:#053146;z-index:999999;
}
.h1{left:0;
animation: load1 7.2s ease infinite;
}
.h2{right:0;
animation: load2 7.2s ease .6s infinite;
}
.h3{right:0;
animation: load3 7.2s ease 1.2s infinite;
}
.h4{right:0;
animation: load4 7.2s ease 1.8s infinite;
}
.h5{left:0;
animation: load5 7.2s ease 2.4s infinite;
}
.h6{left:0;
animation: load6 7.2s ease 3s infinite;
}
@keyframes load1 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.944444433%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}
@keyframes load2 {
0%{top:0;height:0}
6.944444444%{top:0;height:100%}
50%{bottom:0;height:100%}
59.944444433%{bottom:0;height:0}
/* 91.6666667%{bottom:0;height:0%} */
}
@keyframes load3 {
0%{top:0;height:0}
6.944444444%{top:0;height:100%}
50%{bottom:0;height:100%}
59.94444443%{bottom:0;height:0}
/* 91.6666667%{bottom:0;height:0%;} */
}
@keyframes load4 {
0%{top:0;height:0}
6.944444444%{top:0;height:100%}
50%{bottom:0;height:100%}
59.94444443%{bottom:0;height:0}
/* 91.6666667%{bottom:0;height:0%;} */
}
@keyframes load5 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.94444443%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}
@keyframes load6 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.94444443%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}Animating a Hexagon Loader with Pure CSS Demo
By following these steps, you’ve learned not only how to create a specific loading animation but also gained insight into the power of CSS animations and transformations.
