Added 2 Sept 2026Updated 13 Sept 2026

hourglass-timer-meter-15893

Hourglass Timer Meter

Dates & Time

Hourglass Timer Meter

Remaining time read as sand rather than a bar — the level in the top cone drops while the heap in the bottom one builds, with a dashed grain stream falling through the waist and the whole glass turning over on hover.

Dates & Timehourglasstimersandcountdownmeter

lines of CSS: 116lines of CSS
dependencies: 0dependencies
browser, for years: Everybrowser, for years
stops under reduced motion: Guardedstops under reduced motion

Backdrop

4:12 left

Open a live copy in

Vue, Svelte, styled-components and Tailwind exports are part of Pro. HTML, CSS and React are free forever.

hourglass-timer-meter-15893.css

.fx-v14-pr-hourglass-15892 {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem 0.6rem;
  border-radius: 0.6rem;
  background: #101a2e;
  border: 1px solid #253049;
  font-family: system-ui, sans-serif;
}
.fx-v14-pr-hourglass-15892 .gl {
  position: relative;
  width: 66px;
  height: 106px;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.fx-v14-pr-hourglass-15892 .gl::before,
.fx-v14-pr-hourglass-15892 .gl::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #475569, #334155);
}
.fx-v14-pr-hourglass-15892 .gl::before { left: -5px; }
.fx-v14-pr-hourglass-15892 .gl::after { right: -5px; }
.fx-v14-pr-hourglass-15892 .cap {
  position: absolute;
  left: -6px;
  width: 78px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #64748b, #334155);
}
.fx-v14-pr-hourglass-15892 .cap { top: 0; }
.fx-v14-pr-hourglass-15892 .cap.b { top: auto; bottom: 0; }
.fx-v14-pr-hourglass-15892 .tp,
.fx-v14-pr-hourglass-15892 .bt {
  position: absolute;
  left: 0;
  width: 66px;
  height: 47px;
  overflow: hidden;
  background: rgba(148,163,184,0.10);
}
.fx-v14-pr-hourglass-15892 .tp {
  top: 6px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.fx-v14-pr-hourglass-15892 .bt {
  bottom: 6px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.fx-v14-pr-hourglass-15892 .tp i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  animation: fx-v14-pr-hourglass-15892-drain 6s linear infinite;
}
.fx-v14-pr-hourglass-15892 .bt i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6%;
  background: linear-gradient(180deg, #f59e0b, #b45309);
  animation: fx-v14-pr-hourglass-15892-heap 6s linear infinite;
}
.fx-v14-pr-hourglass-15892 .st {
  position: absolute;
  left: 50%;
  top: 44px;
  width: 2px;
  height: 26px;
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, #fbbf24 0 3px, transparent 3px 7px);
  animation: fx-v14-pr-hourglass-15892-fall 0.32s linear infinite;
}
.fx-v14-pr-hourglass-15892 span {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: #fcd34d;
}
.fx-v14-pr-hourglass-15892:hover .gl { transform: rotate(180deg); }
@keyframes fx-v14-pr-hourglass-15892-drain {
  0% { height: 100%; }
  100% { height: 22%; }
}
@keyframes fx-v14-pr-hourglass-15892-heap {
  0% { height: 6%; }
  100% { height: 78%; }
}
@keyframes fx-v14-pr-hourglass-15892-fall {
  0% { background-position: 0 0; }
  100% { background-position: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-v14-pr-hourglass-15892,
  .fx-v14-pr-hourglass-15892::before,
  .fx-v14-pr-hourglass-15892::after,
  .fx-v14-pr-hourglass-15892 *,
  .fx-v14-pr-hourglass-15892 *::before,
  .fx-v14-pr-hourglass-15892 *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

hourglass-timer-meter-15893.html

<div class="fx-v14-pr-hourglass-15892">
  <div class="gl">
    <i class="cap"></i>
    <div class="tp">
      <i></i>
    </div>
    <i class="st"></i>
    <div class="bt">
      <i></i>
    </div>
    <i class="cap b"></i>
  </div>
  <span>4:12 left</span>
</div>

What do I do with this?

Put hourglass-timer-meter-15893.css anywhere your page already loads CSS from — in Next.js that is app/globals.css, or any stylesheet with a <link> in your HTML.
Then put the class on the element you want it on: <button class="fx-v14-pr-hourglass-15892">. The CSS does nothing until a class name in it matches something on the page.

Link the stylesheet, then paste the markup wherever you need it.

npx hoverlab add hourglass-timer-meter-15893

What's included

The markup and the stylesheet, in whichever framework you pick
No runtime dependencies

Works with

React
Vue
Svelte
Tailwind
styled-components
Plain CSS

npx hoverlab add hourglass-timer-meter-15893

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Motion safety

Static estimate, read from the CSS

Reduced motion: Guarded
Ships a prefers-reduced-motion block, so the loop settles into its end state for visitors who ask for less motion.
What it animates: Reflows
Animates height (and background-position). The browser re-lays-out the page on every frame; prefer transform if you can.
Flashing (WCAG 2.3.1): No flashing found
No repeating change in opacity, colour or brightness large enough to count as a flash.
Layout shift (CLS): May shift layout
Animates height on a box in flow, so content beside or after it can move. A category from the CSS, not a measurement for this effect.

Every row is read from the shipped CSS. Only a figure marked measured came from a browser. Customizing the speed changes the timing, so recheck a customized copy. How it is computed

16 more effects in Dates & Time

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Dates & Time

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

What's included

Copy-ready HTML and CSS — 116 lines, no build step
7 export formats — HTML, CSS, React, Vue, Svelte, styled-components, Tailwind
Live customization for hue, saturation, scale and speed
Editable in the playground

npx hoverlab add hourglass-timer-meter-15893
writes it into your project
npx hoverlab dna hourglass-timer-meter-15893
hands it to your agent

Licence

Free to copy and use in personal and non-commercial projects, in as many as you like, with no attribution. Shipping it in client work or a paid product needs Pro ($79 once). Read the licence.

Works with

FrameworksPlain HTMLReactVueSvelteTailwindstyled-components

AgentsCLIMCPFigma

Where this fits

Full sections that use this kind of element.

Meeting SchedulerScheduling & Calendar
Day strip, slot grid and a time zone the visitor can change — because a slot list with no zone on it is how this pattern wastes an hour of everyone involved.
Split Contact FormContact & Forms
A contact form beside the channels that bypass it — a real address, a support link and a response-time promise, which is what makes a form people cannot see into feel worth filling.
Sidebar Dashboard ShellDashboards
Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.

Browse all blocks

Similar effects

Dates & Time

Ocean Heat Calendar
Contribution grid filled column-first with `grid-auto-flow`, so weeks run down and the whole thing stays one flat list of cells.
14MAR
Design systems meetup18:30 · Shoreditch Works32 going
Ocean Event Card
Listing led by a tear-off date block in a real `<time>`, so the day and month are one semantic unit rather than two decorated spans.
Reporting period
From
To
Ocean Date Range
Two dates joined by an en-dash inside one focus ring, with quick presets underneath because most range picks are a common span, not an arbitrary one.
09
Ocean Countdown Ring
Timer that empties rather than fills, the sweep animated through a registered angle property so the arc interpolates smoothly instead of snapping between conic stops.
09Standup
10Design review
11
12Lunch & learn
Ocean Day Agenda
Hour rail with events sitting in the slots they occupy and an empty hour left visibly empty, the current-time rule crossing the whole column with a dot on the gutter.
August 2026
MTWTFSS
272829303112345678910111213141516
Ocean Calendar Popover
Date field opening a month grid anchored beneath it, leading days from the previous month dimmed rather than blank so the week rows stay aligned to their columns.

Browse all dates & time

7 variations of Hourglass Timer Meter

Finished looks, each one a position in the customizer above. Copy any of them, or open it and keep moving the sliders.

Marigold
warm
by Hoverlab
The furthest warm rotation, held at a strong saturation.
Open
Sprint
tempo
by Hoverlab
Four times as fast. The quickest this goes.
Open
Glacier
cool
by Hoverlab
A long cool rotation with barely any added intensity.
Open
Flare
electric
by Hoverlab
Rotated well past warm and lit up.
Open
Arcade
signature
by Hoverlab
A hard rotation, vivid, small and twice as fast.
Open
Petite
proportion
by Hoverlab
The smallest this scales to and still reads.
Open
Graphite
muted
by Hoverlab
Nearly colourless, with just enough hue left to read.
Open

Hourglass Timer Meter

What do I do with this?

What's included

Works with

License

Motion safety

16 more effects in Dates & Time

Shipping one commercially

7 variations of Hourglass Timer Meter

Marigold

Sprint

Glacier

Flare

Arcade

Petite

Graphite