Cube Fold

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-cubefold">
  <span></span><span></span><span></span><span></span>
</div>

CSS

.nuda-cubefold span {
  position: absolute;
  width: 50%;
  height: 50%;
  background: #e4ff54;
  transform-origin: 100% 100%;
  animation: nuda-cube-fold 2.4s ease-in-out infinite both;
}

@keyframes nuda-cube-fold {
  0%, 10%   { transform: perspective(140px) rotateX(-180deg); opacity: 0; }
  25%, 75%  { transform: perspective(140px) rotateX(0);       opacity: 1; }
  90%, 100% { transform: perspective(140px) rotateY(180deg);  opacity: 0; }
}

How to use Cube Fold

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