Created
September 12, 2025 20:35
-
-
Save barak007/fea13456d8ea0d7bd115fb61fec9c403 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>3D CSS Loading Spinner</title> | |
| <style> | |
| /* Base styles and variables */ | |
| :root { | |
| --size: 80px; | |
| --primary: #f6c43b; | |
| --accent: #0afb4e; | |
| --bg: #f9fafb; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: var(--bg); | |
| } | |
| /* Visually hidden helper for accessibility */ | |
| .visually-hidden { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| /* Spinner container */ | |
| .spinner-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| perspective: 1000px; | |
| ; | |
| } | |
| /* Spinner cube structure */ | |
| .spinner { | |
| position: relative; | |
| width: var(--size); | |
| height: var(--size); | |
| transform-style: preserve-3d; | |
| } | |
| /* Individual spinner elements */ | |
| .spinner-element { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--primary); | |
| opacity: 0.8; | |
| border-radius: 8px; | |
| will-change: transform, opacity; | |
| } | |
| /* Animation keyframes for 3D rotation */ | |
| @keyframes rotate3d { | |
| 0% { | |
| transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); | |
| } | |
| 100% { | |
| transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); | |
| } | |
| } | |
| /* Apply animation to spinner */ | |
| .spinner { | |
| animation: rotate3d 2s infinite linear; | |
| } | |
| /* Position each element in 3D space */ | |
| .spinner-element:nth-child(1) { | |
| transform: translateZ(calc(var(--size) / 2)); | |
| } | |
| .spinner-element:nth-child(2) { | |
| transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); | |
| background-color: var(--accent); | |
| } | |
| .spinner-element:nth-child(3) { | |
| transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); | |
| } | |
| .spinner-element:nth-child(4) { | |
| transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); | |
| background-color: var(--accent); | |
| } | |
| .spinner-element:nth-child(5) { | |
| transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); | |
| } | |
| .spinner-element:nth-child(6) { | |
| transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); | |
| } | |
| /* Reduced motion fallback */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .spinner { | |
| animation: none; | |
| transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg); | |
| } | |
| .spinner-element { | |
| opacity: 0.6; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Accessible spinner wrapper with status role --> | |
| <div class="spinner-wrapper" role="status" aria-live="polite"> | |
| <!-- Visually hidden loading text for screen readers --> | |
| <span class="visually-hidden">Loading</span> | |
| <!-- 3D cube spinner made of 6 elements --> | |
| <div class="spinner"> | |
| <div class="spinner-element"></div> | |
| <div class="spinner-element"></div> | |
| <div class="spinner-element"></div> | |
| <div class="spinner-element"></div> | |
| <div class="spinner-element"></div> | |
| <div class="spinner-element"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Author
Author
escape the browser window
Nice
Author
perspective: none;
fixes it
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screen.Recording.2025-09-12.at.23.36.29.mov