Neumorphism Loader
Loader Component with Neumorphism style and Pastel color scheme for E-commerce. Simple complexity, responsive with dark mode support. No JavaScript.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
<div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
Loading...
</div>
</div>
</div>
<style>
.loader {
animation: spin 2s linear infinite;
box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dark .loader {
box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
}
</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.
Loaders Component
A simple loaders component designed for dark mode social media interfaces using a monochromatic color scheme.
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.