Back

Creating a Geometric Hexagon Spinner Animation

Learn how to build a sophisticated hexagonal loader with counter-rotating elements using CSS clip-path and transforms.

HTML

The HTML structure for our hexagon spinner loader is elegantly minimal. We have a main container with the class "hexagon-loader" that houses three nested div elements, each with the class "hexagon" and an additional class to specify its layer ("outer-hex", "middle-hex", and "inner-hex").

        <div class="hexagon-loader">
          <div class="hexagon outer-hex"></div>
          <div class="hexagon middle-hex"></div>
          <div class="hexagon inner-hex"></div>
        </div>

CSS

Let's start by setting up our loader container. We create a relative-positioned container with specific dimensions to house our hexagons. Flexbox is used to center its contents both horizontally and vertically.

        .hexagon-loader {
            position: relative;
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

Next, we define the common properties for all hexagonal elements. The key to creating the hexagon shape is the CSS clip-path property, which allows us to define a polygon shape using a series of x,y coordinate pairs. This approach offers precise control over the shape without needing images or extra markup.

        .hexagon {
            position: absolute;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

Now we style each hexagon individually, defining their sizes and colors. We use a gradient of teal shades from dark for the outer hexagon to light for the inner hexagon. The outer hexagon is the largest at 80px by 80px with a deep teal color. It rotates clockwise with a 3-second animation cycle.

        .outer-hex {
            width: 80px;
            height: 80px;
            background-color: #0F766E;
            animation: spin-clockwise 3s linear infinite;
        }

The middle hexagon is 60px by 60px with a medium teal color. It rotates counter-clockwise with a 2.5-second animation cycle, creating an interesting counterflow effect against the other hexagons.

        .middle-hex {
            width: 60px;
            height: 60px;
            background-color: #14B8A6;
            animation: spin-counter 2.5s linear infinite;
        }

The inner hexagon is the smallest at 40px by 40px with a light teal color. It rotates clockwise like the outer hexagon but with a faster 2-second animation cycle.

        .inner-hex {
            width: 40px;
            height: 40px;
            background-color: #5EEAD4;
            animation: spin-clockwise 2s linear infinite;
        }

We define two rotation animations - one for clockwise spin and one for counter-clockwise. Both use the linear timing function to ensure constant rotation speed without acceleration or deceleration.

        @keyframes spin-clockwise {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes spin-counter {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(-360deg);
            }
        }

The combination of different sizes, rotation directions, and speeds creates a mesmerizing and complex animation despite the relatively simple code. The nested hexagons appear to interact with each other as they rotate in opposite directions. The contrasting rotation directions create a mechanical, gear-like quality that suggests precision and technical sophistication. This hexagon spinner loader offers several unique advantages: - Geometric precision: The hexagonal shape creates a sense of mathematical precision and engineered design, making it appropriate for technical or scientific applications. - Mechanical metaphor: The counter-rotating elements evoke gears or machinery in motion, suggesting complex work being performed. - Visual distinction: The hexagon shape stands out compared to more common circular spinners, creating a memorable and distinctive loading indicator. - Scalability: The loader maintains its visual appeal at various sizes and works well in both small and large implementations. - Modern technique showcase: The use of CSS clip-path demonstrates modern front-end capabilities, signaling a technically current application. This sophisticated geometric animation combines visual interest with a sense of precision, making it ideal for applications where technical excellence is a key value.

Whole code

<div class="hexagon-loader">
  <div class="hexagon outer-hex"></div>
  <div class="hexagon middle-hex"></div>
  <div class="hexagon inner-hex"></div>
</div>

<style>
.hexagon-loader {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon {
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.outer-hex {
  width: 80px;
  height: 80px;
  background-color: #0F766E;
  animation: spin-clockwise 3s linear infinite;
}

.middle-hex {
  width: 60px;
  height: 60px;
  background-color: #14B8A6;
  animation: spin-counter 2.5s linear infinite;
}

.inner-hex {
  width: 40px;
  height: 40px;
  background-color: #5EEAD4;
  animation: spin-clockwise 2s linear infinite;
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-counter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
</style>

Creating a Geometric Hexagon Spinner Animation

HTML

CSS

Whole code

Comments

More loaders

Similar

See also