Neumorphism Loader
A Neumorphism-styled loader component with responsive effects and dark theme support using Tailwind CSS. No JavaScript is needed. Uses subtle shadows to create an extruded effect from the background. Dark mode supported with CSS.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-32 h-32 relative">
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
<div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
Loading...
</div>
</div>
</div>
<style>
.neumorphic-shadow {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-shadow-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
}
@keyframes ping {
0% {
transform: scale(0.8);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
</style>Related Components
MinimalistGrayscaleLoader
Minimalist/Flat Design, Grayscale color scheme, Moderate complexity Loader Component for Business/Corporate websites with responsive design and dark theme support.
Organic Nature-Inspired Loader Component
A high-contrast, nature-inspired loading component suitable for business and corporate websites, featuring flowing lines and dark mode support.