Create an Hourglass Timer Loader using HTML and CSS

Faraz

By Faraz -

Learn how to create a simple hourglass timer loader using HTML and CSS. Follow our step-by-step guide for a visually appealing and functional loader.

Join us on Telegram
create-hourglass-timer-loader-using-html-and-css.webp
Read AlsoBuild Your Own Movie Theater Booking App HTML, CSS, JavaScript Guide.webpBuild Your Own Movie Theater Booking App: HTML, CSS, JavaScript Guide

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Loaders are a great way to show users that something is happening in the background while they wait for a webpage to load. One interesting and creative type of loader is the hourglass timer. It mimics the classic hourglass shape and gives a visual sense of time passing while the content is being processed.

In this blog, we will guide you on how to create an hourglass timer loader using only HTML and CSS. You don’t need any fancy tools—just basic coding knowledge and a few lines of CSS. This loader can make your website look modern and engaging while keeping visitors entertained during loading times.

We will start with the basic structure in HTML, then use CSS to design the hourglass shape, and finally, we’ll add animations to bring it to life. Whether you’re new to web development or have experience, this guide will help you create a functional and eye-catching hourglass loader for your site.

Before we get into the code, let’s look at the requirements. You’ll need:

Now, let’s dive into the steps!

Source Code

Step 1 (HTML Code):

First, we’ll create a basic HTML structure. This structure will include a container for the hourglass loader. Here's an explanation of each part:

1. <!DOCTYPE html>

This is the document type declaration. It tells the browser that this is an HTML5 document.

2. <html lang="en">

This is the opening tag of the HTML document. The lang="en" attribute specifies that the language of the content is English.

3. <head>

The <head> section contains meta information and resources for the webpage. This information is not displayed on the webpage itself but is essential for functionality.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports almost all characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This ensures the page is responsive by setting the viewport to the width of the device and scaling appropriately.
  • <title>Hourglass Timer Loader</title>: This sets the title of the webpage, which will appear on the browser tab.
  • <link rel="stylesheet" href="styles.css">: This links the external CSS file styles.css, where the styles for the hourglass timer loader are defined.

4. <body>

This is where the content of the webpage is defined. Everything inside the <body> tag is displayed in the browser.

5. <div class="hourglass">

This <div> element contains the structure for the hourglass loader. The class="hourglass" will allow CSS to apply styles to this element.

6. <div class="top"></div>

This <div> element represents the top half of the hourglass. It will be styled using the top class in the external CSS file.

7. <div class="bottom"></div>

This <div> represents the bottom half of the hourglass. Like the top class, the bottom class will have its styles defined in the CSS file.

8. Closing tags </body>, </html>

These tags close the body and html sections of the document, ending the structure of the webpage.

Read AlsoCreate a Search Image App with HTML, CSS, and JavaScript.jpgCreate a Stunning Search Image App with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, we will create the hourglass shape using CSS. This part involves using borders and animations to achieve the hourglass effect. Here's an explanation of each part of the CSS:

1. :root { --time: 10s; }

  • :root: Targets the highest-level element (the document itself). This is where CSS variables (custom properties) are defined.
  • --time: 10s;: Defines a CSS variable --time that sets the duration of animations to 10 seconds.

2. body { background: #825CFF; height: 100vh; margin: 0; }

  • background: #825CFF;: Sets the background color of the page to a purple hue.
  • height: 100vh;: Makes the body take the full height of the viewport (100% of the visible screen).
  • margin: 0;: Removes the default margin from the body, ensuring that the content takes up the entire screen without gaps.

3. .hourglass { ... }

  • animation: flip var(--time) ease-in-out infinite;: Applies the "flip" animation to the hourglass container, with the duration set to the value of --time (10s) and a smooth transition (ease-in-out). It loops infinitely.
  • border-bottom: solid 1vmin #A1662F; border-top: solid 1vmin #A1662F;: Adds solid borders at the top and bottom of the hourglass, with a brownish color.
  • left: 50%; top: 50%; position: fixed;: Centers the hourglass on the screen by setting its position in the middle of the page.
  • backdrop-filter: blur(6px);: Applies a blur effect to the background behind the hourglass, adding a frosted glass appearance.

4. .hourglass .top, .hourglass .bottom { ... }

  • background-color: rgba(255, 255, 255, 0.2);: Sets a semi-transparent white background for both the top and bottom parts of the hourglass.
  • box-shadow: 0 0 2vmin 1vmin #bcd inset;: Creates a soft inner shadow around the top and bottom parts, giving them depth.
  • height: 10vmin; width: 10vmin;: Sets the height and width of the hourglass parts to be responsive to the viewport size.

5. .hourglass .top { border-radius: 0 0 50% 50%; }

  • border-radius: 0 0 50% 50%;: Gives the top part of the hourglass a rounded bottom, forming a smooth curve.

6. .hourglass .top:before { ... }

  • animation: top var(--time) linear infinite;: This applies the "top" animation, simulating the sand falling from the top to the bottom, with continuous movement.
  • background-color: #e2ca76;: Sets the color of the "sand" inside the hourglass to a sandy beige.

7. .hourglass .top:after { ... }

  • animation: top-drip var(--time) linear infinite;: Animates the sand "dripping" from the top part of the hourglass.
  • left: 45%; transform: translateY(100%);: Positions the dripping effect near the center of the hourglass and animates it downwards.

8. .hourglass .bottom { border-radius: 50% 50% 0 0; }

  • border-radius: 50% 50% 0 0;: Gives the bottom part a rounded top, complementing the top section of the hourglass.

9. .hourglass .bottom:before { ... }

  • animation: bottom var(--time) linear infinite;: Simulates the sand collecting in the bottom part of the hourglass with a continuous animation.

10. .hourglass .bottom:after { ... }

  • animation: bottom-drip var(--time) linear infinite;: Animates the "sand" moving down from the top to the bottom part.

Animations

@keyframes flip

  • 0%, 45% { transform: rotate(0); }: Keeps the hourglass in its original position for 45% of the time.
  • 50%, 95% { transform: rotate(180deg); }: Flips the hourglass upside down from 50% to 95% of the time.
  • 100% { transform: rotate(360deg); }: Completes a full rotation at the end of the animation.

@keyframes top

  • 0% { transform: translateY(50%); }: Starts the "sand" in the middle of the top half.
  • 50% { transform: translateY(100%); }: Moves the sand down to the bottom of the top half at 50% of the animation.
  • 100% { transform: translateY(-50%); }: Resets the sand position to start again.

@keyframes bottom

  • 0% { transform: translateY(100%); }: Starts the sand at the bottom of the bottom half.
  • 50% { transform: translateY(50%); }: Fills the bottom part halfway with sand by the midpoint of the animation.
  • 100% { transform: translateY(-100%); }: Drains all the sand out of the bottom part.

@keyframes top-drip and @keyframes bottom-drip

These animations control the small "drips" of sand from the top to the bottom:

  • top-drip simulates sand dripping from the top to the bottom.
  • bottom-drip simulates the collection of sand in the bottom half.
:root{
  --time: 10s;
}

body {
  background: #825CFF;
  height: 100vh;
  margin: 0;
}

.hourglass {
  animation: flip var(--time) ease-in-out infinite;
  border-bottom: solid 1vmin #A1662F;
  border-top: solid 1vmin #A1662F;
  left: 50%;
  margin-left: -6vmin;
  margin-top: -11vmin;
  padding: 0 1vmin;
  position: fixed;
  top: 50%;
  backdrop-filter: blur(6px); 
}
.hourglass .top, .hourglass .bottom {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 2vmin 1vmin #bcd inset;
  height: 10vmin;
  overflow: hidden;
  position: relative;
  width: 10vmin;
}
.hourglass .top {
  border-radius: 0 0 50% 50%;
}
.hourglass .top:before {
  animation: top var(--time) linear infinite;
  background-color: #e2ca76;
  border-radius: 50%;
  content: "";
  display: block;
  height: 10vmin;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateY(50%);
  width: 10vmin;
}
.hourglass .top:after {
  animation: top-drip var(--time) linear infinite;
  background-color: #e2ca76;
  content: "";
  display: block;
  height: 100%;
  left: 45%;
  position: absolute;
  top: 0;
  transform: translateY(100%);
  width: 10%;
}
.hourglass .bottom {
  border-radius: 50% 50% 0 0;
}
.hourglass .bottom:before {
  animation: bottom var(--time) linear infinite;
  background-color: #e2ca76;
  border-radius: 50%;
  content: "";
  display: block;
  height: 10vmin;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateY(100%);
  width: 10vmin;
}
.hourglass .bottom:after {
  animation: bottom-drip var(--time) linear infinite;
  background-color: #e2ca76;
  content: "";
  display: block;
  height: 100%;
  left: 45%;
  position: absolute;
  top: 0;
  width: 10%;
}

@keyframes flip {
  0%, 45% {
    transform: rotate(0);
  }
  50%, 95% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bottom {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(50%);
  }
  51% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes top {
  0% {
    transform: translateY(50%);
  }
  50% {
    transform: translateY(100%);
  }
  51% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes bottom-drip {
  0% {
    left: 45%;
    transform: translateY(-100%);
    width: 10%;
  }
  5% {
    transform: translateY(0);
  }
  45%, 100% {
    left: 50%;
    transform: translateY(0);
    width: 0;
  }
}
@keyframes top-drip {
  0%, 50% {
    left: 45%;
    transform: translateY(100%);
    width: 10%;
  }
  55% {
    left: 45%;
    transform: translateY(0);
    width: 10%;
  }
  100% {
    left: 50%;
    transform: translateY(0);
    width: 0;
  }
}

Final Output:

create-hourglass-timer-loader-using-html-and-css.gif
Read Alsohow to create toy toggle switch button in html and css.pngHow to Create Pure CSS Toy Toggle Switch Button Using HTML and CSS

Conclusion:

And there you have it—a simple yet effective hourglass timer loader created using HTML and CSS. You can further customize it by changing colors, animation speed, or size to match your website’s style. This loader not only adds a unique touch to your site but also keeps users engaged while they wait for content to load.

By following these steps, you’ve built an eye-catching and functional hourglass loader that works on any web page.

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: how to create an hourglass timer loader using html and css, html and css hourglass loader tutorial, step-by-step guide for hourglass timer animation, hourglass loaders, hourglass timer, html and css loader, timer animation
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺