Hourglass

A copy-paste spinners component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

SpinnersHTMLCSSany framework

Copy into your project

HTML

<div class="nuda-hour">
  <svg viewBox="0 0 24 32" fill="currentColor">
    <path d="M4 2h16v6L14 16l6 8v6H4v-6l6-8L4 8z"
          stroke="#e4ff54" stroke-width="1.5" fill="none" />
    <path class="nuda-hour__sand" d="M7 5h10v3l-5 5-5-5z" fill="#e4ff54" />
  </svg>
</div>

CSS

.nuda-hour {
  display: inline-flex;
  color: #e4ff54;
  animation: nuda-hour-flip 2.8s ease-in-out infinite;
}

@keyframes nuda-hour-flip {
  0%, 40%   { transform: rotate(0);      }
  50%, 90%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}

How to use Hourglass

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More spinners components

← Browse all NudaUI components