← Back to Gallery
Claymorphic Sand-Flow Loader
Live Preview
A sophisticated hourglass loader utilizing the Claymorphism design trend. It features soft, tactile surfaces with multiple inner and outer shadows to create a squishy, 3D effect. The animation is a synchronized system of three separate CSS keyframes: one for the top reservoir emptying, one for the bottom filling, and a third for the physical rotation of the entire assembly. The color palette uses muted, professional pastels to maintain a modern aesthetic suitable for SaaS or creative portfolios.
Features
- Pure CSS implementation with zero JavaScript dependencies
- Claymorphic UI style with multi-layered soft shadows
- Synchronized sand flow and gravity-flip animations
- Floating text animation with character-staggered delays
- Fully responsive scaling for mobile viewports
- Accessible design with high-contrast text and smooth motion
Uses
- SaaS dashboard initial loading screens
- Creative portfolio page transitions
- Mobile app splash screens
- File upload or processing indicators
Benefits
- Zero JS overhead ensures maximum performance and compatibility
- High visual engagement through tactile depth and smooth physics
- Easily customizable color palette to match brand identity
- Modern aesthetic that stands out from standard spinner loaders
Techniques Used
Multiple box-shadow layers (inset and outset), cubic-bezier timing functions, transform-origin manipulation, CSS flexbox centering, keyframe synchronization.
Frequently Asked Questions
How does the Claymorphic Sand-Flow Loader achieve its tactile 3D volume using only standard CSS box-shadow properties?
The squishy effect is created by layering multiple inset and outset shadows. Specifically, it uses a light inset shadow on the top-left for a highlight, a darker inset shadow on the bottom-right for depth, and two levels of soft drop-shadow for the external footprint, simulating a soft-touch clay material without the need for complex SVG filters.
What CSS logic ensures the sand flow rate matches the gravity-flip rotation to prevent visual gaps in the hourglass transition?
The synchronization is managed through identical animation durations for the empty-sand, fill-sand, and hourglass-flip keyframes. By using a custom cubic-bezier timing function, the sand appears to drain at a rate that accelerates into the rotation, ensuring the bottom reservoir completes its growth exactly as the top one reaches zero percent opacity.
How are the staggered character delays for the floating text implemented in pure CSS without using a JavaScript loop for index injection?
The implementation utilizes CSS custom properties assigned directly to individual span elements within the HTML. Each span receives a unique char-index value, which is then calculated within the animation-delay property using calc(var(--char-index) * 0.1s), creating the staggered wave effect while maintaining a single CSS class for styles.
To adapt the loader for a high-density Dark Mode SaaS dashboard, how can the muted pastel palette be adjusted while maintaining the Claymorphic depth?
To transition to dark mode, the box-shadow HSL values must be shifted. The highlights require a higher luminance with lower opacity such as hsla(0, 0%, 100%, 0.2), while the depth shadows require a shift towards deeper, desaturated tones like navy or charcoal to preserve the 3D curvature against a dark background while maintaining WCAG contrast ratios.
How does the loader maintain WCAG compliance for users with vestibular sensitivities while using the prefers-reduced-motion media feature?
The component includes a media query that overrides the animation property. Instead of the 360-degree rotation and continuous sand flow, it switches to a static breathing opacity fade or a simple color pulse, ensuring the high-contrast text remains legible and the UI remains accessible without causing motion-related discomfort.