Hourglass Loader

<div class="hourglass-loader" aria-label="Loading"></div>

.hourglass-loader{
  width:52px;
  height:52px;
  border:6px solid #22d3ee;
  border-left-color:transparent;
  border-right-color:transparent;
  border-radius:50%;

  animation:hourglassFlip 1.2s ease-in-out infinite;
}

@keyframes hourglassFlip{
  0%{
    transform:rotate(0deg) scale(.9);
  }

  50%{
    transform:rotate(180deg) scale(1);
  }

  100%{
    transform:rotate(360deg) scale(.9);
  }
}

How This Hourglass Loader Works

The Hourglass Loader is a CSS-only loading indicator made from a single <div> element. Its shape comes from borders rather than extra HTML elements, which keeps the component very lightweight. The loader also includes aria-label="Loading" so assistive technologies receive a simple description of its purpose.

The .hourglass-loader element is set to 52px wide and 52px high, giving it a square base. A 6px solid cyan border using #22d3ee is applied around the element. The left and right border colors are then changed to transparent, leaving only the top and bottom sections visible.

Because the element also uses border-radius: 50%, those visible border sections curve around a circular shape. This combination of rounded edges and transparent side borders creates the simplified hourglass-like outline without requiring SVG, pseudo-elements, or additional markup.

The motion comes from the hourglassFlip keyframe animation. It runs for 1.2s, uses an ease-in-out timing function, and repeats infinitely. This means the loader continuously rotates while slightly changing size during each cycle.

At the start of the animation, the loader uses transform: rotate(0deg) scale(.9). The scale(.9) value makes the element slightly smaller than its normal size. Halfway through the cycle, it rotates to 180deg and returns to scale(1), so the loader reaches its full size at the midpoint.

By the end of the animation, the element has completed a full 360deg rotation and returns to scale(.9). Because the beginning and ending scale values match, the infinite animation loops smoothly without a sudden size change.

The rotation creates the flipping effect, while the subtle scale change keeps the movement from looking like a standard constant-size spinner. Both effects are handled through the same transform property. For more information about combining transformations like rotation and scaling, see the MDN CSS transform documentation.

There is no JavaScript in this component. The loader starts animating as soon as its CSS is applied and continues until the element is removed, hidden, or its animation is stopped through another CSS rule.

Customizing the Hourglass Loader

The loader uses only a small number of CSS values, so its appearance and movement can be adjusted easily.

• Change the 52px width and height to make the loader larger or smaller.
• Adjust the 6px border width to create a thinner or heavier hourglass outline.
• Replace #22d3ee with another color to match your interface.
• Change the 1.2s animation duration to make the flipping motion faster or slower.
• Replace ease-in-out with another animation timing function to change the acceleration pattern.
• Adjust scale(.9) if you want the size change at the start and end of each cycle to be more or less noticeable.
• Change the 180deg midpoint rotation or 360deg final rotation if you want to experiment with a different flipping pattern.

Where to Use the Hourglass Loader

This component works well when you need a small indefinite loading indicator and do not have an exact progress percentage to display.

• Form submissions while a request is being processed.
• Dashboard widgets that are waiting for data.
• Modal windows while remote content is loading.
• Buttons that temporarily enter a loading state.
• File-processing interfaces where completion time is unknown.
• Minimal dark or light interfaces that need a compact animated loader.

For another CSS-only option with a different movement style, the Square Flip Loader can be useful when you want a more geometric loading indicator. Since the Hourglass Loader contains only one element and one keyframe animation, it can also fit easily inside cards, buttons, overlays, or centered loading screens.

Frequently Asked Questions

Does the Hourglass Loader use JavaScript?

No. The component does not contain any JavaScript. Its shape and continuous movement are created entirely with CSS.

Why are the left and right borders transparent?

Making the left and right borders transparent leaves only the curved top and bottom border sections visible. This creates the loader’s simplified hourglass-style appearance.

How does the loader create both rotation and resizing?

The transform property combines rotate() and scale() in each keyframe. The loader rotates from 0 to 360 degrees while changing between scale(.9) and scale(1).

Can I make the Hourglass Loader spin faster?

Yes. Reduce the current 1.2s animation duration to speed it up. Increasing that value will make each complete flip take longer.

The Hourglass Loader keeps its implementation simple with one element, transparent borders, and a repeating transform animation, making it a practical choice for compact loading states.