Neumorphic Loaders 컴포넌트

블로그 또는 콘텐츠 사이트에 적합한 유사한 색 구성표를 가진 Neumorphic Loaders 구성 요소로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Neumorphic Loader 1 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-blue-500 dark:border-blue-700 animate-spin"></div>
  </div>

  <!-- Neumorphic Loader 2 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-green-500 dark:border-green-700 animate-pulse"></div>
  </div>

  <!-- Neumorphic Loader 3 (for larger screens with subtle animation) -->
  <div class="hidden md:flex relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-purple-500 dark:border-purple-700 animate-bounce-slow"></div>
  </div>
</div>

<!-- Add a style block for the custom animation, as Tailwind doesn't have a direct "bounce-slow" -->
<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }

  /* Neumorphism Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }
</style>

Neumorphic Loaders 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

미니멀리스트그레이스케일로더

로더 구성 요소

Organic_Nature_Loader_Real_Estate