Create a Hexagon Loader with HTML and CSS

By Faraz - June 16, 2024

Learn how to create a hexagon loader using HTML and CSS. Follow this step-by-step tutorial with source code included for seamless integration.

Join us on Telegram

Read Also Create Your Own Dictionary with HTML, CSS, and JavaScript.jpg

Create Your Own Dictionary with HTML, CSS, and JavaScript

A hexagon loader is an animated graphic that features a hexagonal shape. Creating a hexagon loader using HTML and CSS is a great way to enhance your website's user interface. Loaders are essential for providing visual feedback to users while content is being loaded in the background.

In this tutorial, we will guide you through the process of creating a hexagon loader step by step. By the end of this guide, you will have a fully functional hexagon loader that you can customize to fit your website's design.

Source Code

Step 1 (HTML Code):

To begin, create a new directory for your project.

Inside this directory, create two files: index.html and styles.css.

The index.html file will contain the HTML structure of our hexagon loader, while the styles.css file will contain the CSS for styling and animating the loader.

Make sure to link the CSS file to the HTML file so that the styles are applied correctly.

The HTML structure for our hexagon loader is relatively simple.

We will use a single <ul> element with a class of hexagon-container.

Inside this <ul>, we will create seven child <li> elements that will form the sides of the hexagon.

Here's a breakdown of each part:

1. Document Type Declaration (<!DOCTYPE html>):

This declares the document type and version of HTML being used (HTML5 in this case).

2. HTML Root Element (<html lang="en">):

The <html> element is the root of the HTML document.
lang="en" attribute specifies that the primary language is English for the document.

3. Head Section (<head>):

The <head> section contains metadata about the HTML document.
<meta charset="UTF-8" />: Specifies the character encoding (UTF-8), which supports a wide range of characters.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Provides instructions to the browser on how to render the webpage (in this case, to use the latest version of Internet Explorer's rendering engine).
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport width to the device width and sets initial zoom level to 1.0, ensuring proper scaling on different devices.
<title>Hexagon Loader</title>: Sets the title of the webpage displayed in the browser tab.
<link rel="stylesheet" href="styles.css" />: Links an external stylesheet (styles.css) to the HTML document for styling purposes.

4. Body Section (<body>):

The <body> section contains the content of the webpage visible to users.
<div class="loader">: Defines a <div> element with the class name loader, which wraps the loader animation.
<ul class="hexagon-container">: Defines an unordered list (<ul>) with the class name hexagon-container, which contains multiple hexagon shapes.
<li class="hexagon hex_1"></li> to <li class="hexagon hex_7"></li>: Each <li> element represents a hexagon shape (<li> is used here for simplicity, although typically used for list items).

5. External Stylesheet (styles.css):

The <link> tag in the <head> section links an external CSS file (styles.css) that contains styles for the hexagon loader and any other styling needed for the webpage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hexagon Loader</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="loader">
      <ul class="hexagon-container">
        <li class="hexagon hex_1"></li>
        <li class="hexagon hex_2"></li>
        <li class="hexagon hex_3"></li>
        <li class="hexagon hex_4"></li>
        <li class="hexagon hex_5"></li>
        <li class="hexagon hex_6"></li>
        <li class="hexagon hex_7"></li>
      </ul>
    </div>
  </body>
</html>

Read Also Create Responsive Customer Receipt with HTML Email Template (Source Code).webp

Create Responsive Customer Receipt with HTML Email Template (Source Code)

Step 2 (CSS Code):

Next, we need to style the hexagon loader using CSS. Let's break down the CSS code step by step:

1. Resetting Lists

ol, ul {
  list-style: none;
  margin: 0;
}

This snippet targets <ol> (ordered lists) and <ul> (unordered lists) elements and removes their default list styles (like bullets or numbers) and margins, ensuring they appear without any default browser styling.

2. Loader Styles

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0px 0px -80px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid #E3E4DC;
}

Defines a circular loader with fixed positioning at the center of the viewport (top: 50%; left: 50%). It has a diameter of 160px (width: 160px; height: 160px;) and uses negative margins to center it perfectly (margin: -80px 0px 0px -80px;). The loader has a transparent background, a circular border (border-radius: 50%;), and a thin solid border with color #E3E4DC.

.loader:before, .loader:after {
  /* styles for before and after pseudoelements */
}

These pseudoelements (:before and :after) are used to create additional visual effects within the loader.

3. Hexagon Animation

.hexagon-container {
  position: relative;
  top: 33px;
  left: 41px;
  border-radius: 50%;
}

Positions a container (hexagon-container) that holds multiple hexagons (hexagon elements). It is offset from its normal position (top: 33px; left: 41px;) and has a rounded shape (border-radius: 50%;).

.hexagon {
  position: absolute;
  width: 40px;
  height: 23px;
  background-color: #556C82;
}
.hexagon:before, .hexagon:after {
  /* styles for before and after pseudoelements of hexagon */
}

Defines individual hexagons (hexagon) within the container. They have specific dimensions (width: 40px; height: 23px;), a background color #556C82 (a shade of blue-gray), and are positioned absolutely within the container.

4. Hexagon Animation Delay and Keyframes

.hexagon.hex_1 {
  /* animation properties for hexagon with class hex_1 */
}
/* similar blocks for hex_2 through hex_7 */

Each .hexagon element with a specific class (hex_1 through hex_7) has animation properties defined. They use the Animasearch animation, each with a different delay (animation-delay) to create a staggered animation effect.

5. Keyframes for Animation

@keyframes Animasearch {
  /* keyframes for the Animasearch animation */
}
@keyframes rotate {
  /* keyframes for the rotate animation */
}
@keyframes rotate2 {
  /* keyframes for the rotate2 animation */
}
@keyframes rotate3 {
  /* keyframes for the rotate3 animation */
}

These @keyframes blocks define various animations used throughout the CSS. They specify how properties (like transform, opacity, and clip) change over time to create smooth animations (rotate, rotate2, rotate3, and Animasearch).

ol,ul {
  list-style: none;
  margin: 0;
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0px 0px -80px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid #E3E4DC;
}
.loader:before {
  content: "";
  width: 164px;
  height: 164px;
  display: block;
  position: absolute;
  border: 2px solid #898a86;
  border-radius: 50%;
  top: -2px;
  left: -2px;
  box-sizing: border-box;
  clip: rect(0px, 35px, 35px, 0px);
  z-index: 10;
  animation: rotate infinite;
  animation-duration: 3s;
  animation-timing-function: linear;
}
.loader:after {
  content: "";
  width: 164px;
  height: 164px;
  display: block;
  position: absolute;
  border: 2px solid #c1bebb;
  border-radius: 50%;
  top: -2px;
  left: -2px;
  box-sizing: border-box;
  clip: rect(0px, 164px, 150px, 0px);
  z-index: 9;
  animation: rotate2 3s linear infinite;
}

.hexagon-container {
  position: relative;
  top: 33px;
  left: 41px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 40px;
  height: 23px;
  background-color: #556C82;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -11px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 11.5px solid #556C82;
}
.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 #556C82;
}

.hexagon.hex_1 {
  top: 0px;
  left: 0px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 0.2142857143s;
}

.hexagon.hex_2 {
  top: 0px;
  left: 42px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 0.4285714286s;
}

.hexagon.hex_3 {
  top: 36px;
  left: 63px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 0.6428571429s;
}

.hexagon.hex_4 {
  top: 72px;
  left: 42px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 0.8571428571s;
}

.hexagon.hex_5 {
  top: 72px;
  left: 0px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 1.0714285714s;
}

.hexagon.hex_6 {
  top: 36px;
  left: -21px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 1.2857142857s;
}

.hexagon.hex_7 {
  top: 36px;
  left: 21px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%, 50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}
@keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Final Output:

Read Also make-your-own-notes-app-with-html-css-and-javascript.webp

Make Your Own Notes App with HTML, CSS, and JavaScript

Conclusion:

Creating a hexagon loader using HTML and CSS is a fun and rewarding project. With just a few lines of code, you can add a visually appealing element to your website that enhances the user experience. Feel free to customize the colors, animation speed, and size of the hexagon loader to match your website's design.

We hope this tutorial has been helpful, and we look forward to seeing the unique hexagon loaders you create!

Code by: CCG

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: hexagon loader, html css animation, css loader, loaders, source code, how to create a hexagon loader, hexagon css animation tutorial, step-by-step hexagon loader with html and css, hexagon loader source code, css animation examples

End of the article

Latest Post

Create Car Registration System Using HTML, CSS, and JavaScript

by Faraz - December 08, 2024

Learn how to create a simple car registration system with HTML, CSS, and JavaScript in this easy step-by-step guide. Build a functional and attractive form with minimal code.