구성 요소 로더 Skeuomorphic Loader 컴포넌트

Skeuomorphic Loader 컴포넌트

스큐어모픽 디자인, 보색 구성표 및 다크 모드 지원을 갖춘 전문적이고 반응이 빠른 로더 구성 요소로 비즈니스/기업 웹 사이트에 적합합니다. 금속과 같은 컨테이너 안에 있는 미묘한 애니메이션 로딩 바가 특징입니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
    Loading...
  </h2>

  <!-- Skeuomorphic Loader Container -->
  <div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
    
    <!-- Inner Bezel/Recess -->
    <div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
      
      <!-- Loading Bar Track -->
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
        
        <!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
        <div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
        </div>
      </div>
    </div>
    
    <p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
      Preparing resources...
    </p>

  </div>

  <style>
    @keyframes loading-bar {
      0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
      25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
      50% { width: 100%; opacity: 1; }
      75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
    }

    .animate-loading-bar {
      animation: loading-bar 2s ease-in-out infinite alternate;
    }

    @keyframes pulse-subtle {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.01); filter: brightness(1.05); }
    }

    .animate-pulse-subtle {
      animation: pulse-subtle 3s ease-in-out infinite;
    }

    /* Custom utility for inner dark shadow to mimic depth */
    .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .dark .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    }
  </style>

</div>

관련 구성 요소

뉴모피즘 로더

전자 상거래를 위한 Neumorphism 스타일과 파스텔 색 구성표가 있는 로더 구성 요소. 단순하고 복잡하며 다크 모드 지원으로 반응합니다. 자바스크립트가 없습니다.

열다

로더 구성 요소

머티리얼 디자인 스타일로 디자인된 로더 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다

네온글로우웨더로더

네온 글로우 효과, 흑백 베이스, 다크 모드 지원을 포함한 생생한 액센트 색상이 있는 간단하고 반응이 빠른 날씨/기후 로더 구성 요소입니다.

열다