.loader {
  --dur: 2s;
  display: block;
  margin: auto;
  width: 14em;
  height: auto;
}
.loader__glare-top,
.loader__glare-bottom,
.loader__model,
.loader__motion-thick,
.loader__motion-medium,
.loader__motion-thin,
.loader__sand-drop,
.loader__sand-fill,
.loader__sand-grain-left,
.loader__sand-grain-right,
.loader__sand-line-left,
.loader__sand-line-right,
.loader__sand-mound-top,
.loader__sand-mound-bottom {
  animation-duration: var(--dur);
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  animation-iteration-count: infinite;
}
.loader__glare-top {
  animation-name: glare-top;
}
.loader__glare-bottom {
  animation-name: glare-bottom;
}
.loader__model {
  animation-name: loader-flip;
  transform-origin: 12.25px 16.75px;
}
.loader__motion-thick,
.loader__motion-medium,
.loader__motion-thin {
  transform-origin: 26px 26px;
}
.loader__motion-thick {
  animation-name: motion-thick;
}
.loader__motion-medium {
  animation-name: motion-medium;
}
.loader__motion-thin {
  animation-name: motion-thin;
}
.loader__sand-drop {
  animation-name: sand-drop;
}
.loader__sand-fill {
  animation-name: sand-fill;
}
.loader__sand-grain-left {
  animation-name: sand-grain-left;
}
.loader__sand-grain-right {
  animation-name: sand-grain-right;
}
.loader__sand-line-left {
  animation-name: sand-line-left;
}
.loader__sand-line-right {
  animation-name: sand-line-right;
}
.loader__sand-mound-top {
  animation-name: sand-mound-top;
}
.loader__sand-mound-bottom {
  animation-name: sand-mound-bottom;
  transform-origin: 12.25px 31.5px;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 10%);
    --fg: hsl(var(--hue), 90%, 90%);
  }
}
/* Animation */
@keyframes loader-flip {
  from {
    transform: translate(13.75px, 9.25px) rotate(-180deg);
  }
  24%,
  to {
    transform: translate(13.75px, 9.25px) rotate(0);
  }
}
@keyframes glare-top {
  from {
    stroke: rgba(255, 255, 255, 0);
  }
  24%,
  to {
    stroke: white;
  }
}
@keyframes glare-bottom {
  from {
    stroke: white;
  }
  24%,
  to {
    stroke: rgba(255, 255, 255, 0);
  }
}
@keyframes motion-thick {
  from {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(0.67turn);
  }
  20% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    stroke: rgb(32, 32, 32);
    stroke-dashoffset: 141.11;
    transform: rotate(1turn);
  }
  40%,
  to {
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(1.33turn);
  }
}
@keyframes motion-medium {
  from,
  8% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(0.5turn);
  }
  20% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    stroke: white;
    stroke-dashoffset: 147.53;
    transform: rotate(0.83turn);
  }
  32%,
  to {
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(1.17turn);
  }
}
@keyframes motion-thin {
  from,
  4% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(0.33turn);
  }
  24% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    stroke: rgb(53, 53, 53);
    stroke-dashoffset: 134.7;
    transform: rotate(0.67turn);
  }
  44%,
  to {
    stroke: rgba(255, 255, 255, 0);
    stroke-dashoffset: 153.94;
    transform: rotate(1turn);
  }
}
@keyframes sand-drop {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 1;
  }
  70%,
  to {
    stroke-dashoffset: -107;
  }
}
@keyframes sand-fill {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 55;
  }
  70%,
  to {
    stroke-dashoffset: -54;
  }
}
@keyframes sand-grain-left {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 29;
  }
  70%,
  to {
    stroke-dashoffset: -22;
  }
}
@keyframes sand-grain-right {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 27;
  }
  70%,
  to {
    stroke-dashoffset: -24;
  }
}
@keyframes sand-line-left {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 53;
  }
  70%,
  to {
    stroke-dashoffset: -55;
  }
}
@keyframes sand-line-right {
  from,
  10% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    stroke-dashoffset: 14;
  }
  70%,
  to {
    stroke-dashoffset: -24.5;
  }
}
@keyframes sand-mound-top {
  from,
  10% {
    animation-timing-function: linear;
    transform: translate(0, 0);
  }
  15% {
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
    transform: translate(0, 1.5px);
  }
  51%,
  to {
    transform: translate(0, 13px);
  }
}
@keyframes sand-mound-bottom {
  from,
  31% {
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    transform: scale(1, 0);
  }
  56%,
  to {
    transform: scale(1, 1);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Hourglass Loader Using SVG and CSS Only

This animated hourglass loader is a purely HTML and CSS solution that uses SVG to render a detailed sand-timer animation. It’s lightweight, responsive, and requires no JavaScript. Everything from the falling sand to the rotating motion is driven by CSS keyframes.

Design Overview

The loader is built around an SVG <g> element that rotates clockwise, giving the illusion of a flipping hourglass. Inside it is a stylized hourglass shape with curved glass bulbs, filled and drained by animated sand particles.

The sand transitions from the top bulb to the bottom through a center stream, represented by animated lines. Simultaneously, a “sand mound” grows in the bottom bulb and shrinks in the top, creating a realistic hourglass illusion.

Structure Details

Rotating Circles: Three concentric circular strokes (thick, medium, thin) rotate around the hourglass, fading in and out during the cycle.
Sand Motion: Individual lines simulate falling grains and fill levels.
Mounds: Two clipped <path>s represent accumulating and depleting sand mounds in the top and bottom bulbs.
Glare Effects: Top and bottom glares highlight the glass surface as the hourglass flips.

Animations

The motion is entirely handled via CSS @keyframes. Key transitions include:

loader-flip: Rotates the hourglass by 180° to simulate flipping.
sand-drop: Animates the center sand stream downward.
sand-fill and sand-line-*: Control the level and texture of the sand inside the lower bulb.
motion-thick, motion-medium, motion-thin: Rotate and fade outer loader rings at varying speeds and weights.
sand-mound-top & sand-mound-bottom: Animate sand pile growth and shrink using scale and translation.

All elements are synchronized with a shared custom duration variable (--dur), making the loader easy to tweak by changing one value.

Responsive & Themed

The loader scales with em units, making it responsive to font size. It also adapts to dark mode using a media query, changing colors with CSS custom properties based on the user’s color scheme preference.

This SVG-based hourglass loader is a fully self-contained, reusable animation for loading states. It’s both visually engaging and technically precise, with all motion driven by CSS animations.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.

Animated Hourglass Loader Using SVG and CSS Only

Design Overview

Structure Details

Animations

Responsive & Themed

Leave a ReplyCancel Reply

Trending now