Neumorphic Loader

A simple Neumorphic loader component for e-commerce sites with dark mode support.

Preview

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-64 h-64">
    <div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>

Related Components

Loaders Component

A Loaders Component designed with a skeuomorphic style using a triadic color scheme for a blog or content-focused website. It features a simple layout appropriate for content consumption, incorporating dark mode support.

Open

Industrial_Rainbow_Healthcare_Loader

An industrial-style loader component for healthcare applications, featuring raw elements, a multi-color rainbow gradient, and full responsiveness with dark mode support. Utilizes simple CSS animations for the loading effect.

Open

Neon_Glow_Autumn_Loader

A moderately complex loader component with neon/glow effects and autumn colors, suitable for booking and reservation systems. Features responsive design and dark mode support.

Open