CSS Hex Loading Animation Using Only HTML and CSS
In this blog post, I will show you how to create a CSS hex loading animation using only HTML and CSS. A loading animation is a visual indicator that something is happening in the background, such as fetching data or loading a page.
A hex is a six-sided polygon that can create interesting patterns and shapes. By combining these two elements, we can create a dynamic and eye-catching animation that can enhance the user experience of our website or app.
To create a CSS hex loading animation, we will need to follow these steps:
1. Create a HTML structure with six div elements inside a container div. Each div will represent one side of the hexagon.
2. Apply some basic CSS styles to the container div, such as width, height, position, and overflow. We will also use the transform property to rotate the container div by 30 degrees, so that the hexagon will have a flat top and bottom.
3. Apply some CSS styles to the six div elements, such as width, height, background-color, border-radius, and box-shadow. We will also use the transform property to rotate each div by 60 degrees, so that they will form a hexagon shape. We will also use the transform-origin property to set the pivot point of each rotation to the center of the container div.
4. Use the @keyframes rule to create a CSS animation that will change the opacity of each div from 0 to 1 and back to 0 in a loop. We will also use the animation-delay property to stagger the animation of each div, so that they will fade in and out one by one in a clockwise direction.
5. Apply the animation to each div using the animation property, and specify the name, duration, iteration count, and timing function of the animation.
Here is the complete HTML and CSS code for the CSS hex loading animation:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Hex loader animation </title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hex-border">
<div class="hexagons">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</div>
</body>
</html>
CSS
body {
height: 100vh;
background: linear-gradient(to left bottom, #051937, #004f7c, #008b98, #00c477, #a9f315););
}
.hex-border {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 170px;
height: 170px;
border: 2px solid #ebedf1;
border-radius: 100%;
}
.hex-border::before {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 5px solid #0df327;
border-radius: 100%;
box-sizing: border-box;
clip-path: inset(0px 135px 135px 0px);
top: -2px;
left: -2px;
animation: rotateSmall 2s linear infinite;
z-index: 2;
}
.hex-border::after {
content: "";
position: absolute;
width: 174px;
height: 174px;
border: 5px solid #0df327;
border-radius: 100%;
box-sizing: border-box;
top: -2px;
left: -2px;
clip-path: inset(0px 30px 30px 0px);
animation: rotateLarge 2s linear infinite;
}
.hexagons {
position: relative;
border-radius: 100%;
padding: 5%;
top: 30px;
left: 35px;
}
.hexagon {
position: absolute;
width: 40px;
height: 23px;
background-color: #13ec13;
transform: scale(1.02);
transform-origin: center;
}
.hexagon::before {
content: "";
position: absolute;
top: -11.5px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 11.5px solid #13ec13;
}
.hexagon::after {
content: "";
position: absolute;
top: 23px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 11.5px solid #13ec13;
}
.hexagon:nth-child(1) {
animation: animateHex 3s infinite;
}
.hexagon:nth-child(2) {
left: 53px;
animation: animateHex 3s 0.2s infinite;
}
.hexagon:nth-child(3) {
left: -13px;
top: 46px;
animation: animateHex 3s 1s infinite;
}
.hexagon:nth-child(4) {
left: 31px;
top: 46px;
animation: animateHex 3s 1.2s infinite;
}
.hexagon:nth-child(5) {
left: 75px;
top: 46px;
animation: animateHex 3s 0.4s infinite;
}
.hexagon:nth-child(6) {
top: 84px;
animation: animateHex 3s 0.8s infinite;
}
.hexagon:nth-child(7) {
left: 53px;
top: 84px;
animation: animateHex 3s 0.6s infinite;
}
@keyframes rotateSmall {
100% {
transform: rotate(1turn);
}
}
@keyframes rotateLarge {
0% {
clip-path: inset(0px 30px 30px 0px);
}
50% {
clip-path: inset(0px 150px 150px 0px);
}
100% {
transform: rotate(1turn);
clip-path: inset(0px 30px 30px 0px);
}
}
@keyframes animateHex {
0% {
transform: scale(1.02);
}
20%,
50% {
transform: scale(0.6);
opacity: 0;
}
65% {
transform: scale(1.02);
opacity: 1;
}
}
For More Tutorials Please Click Here
