CCHub Logo CCHub Tailwind Collection
구성 요소 로더 뉴모피즘 로더

뉴모피즘 로더

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Neumorphism 스타일의 로더 구성 요소입니다. JavaScript가 필요하지 않습니다. 미묘한 그림자를 사용하여 배경에서 돌출된 효과를 만듭니다. CSS에서 지원되는 다크 모드.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Industrial_Rainbow_Healthcare_Loader

헬스케어 애플리케이션을 위한 산업용 로더 구성 요소로, 원시 요소, 멀티 컬러 무지개 그라디언트, 다크 모드 지원으로 완전한 응답성을 제공합니다. 로딩 효과를 위해 간단한 CSS 애니메이션을 활용합니다.

열다

로더 구성 요소

머티리얼 디자인 원칙을 기반으로 설계된 로더 구성 요소로, 다크 모드 및 반응형 효과에 대한 Tailwind CSS 지원이 있습니다.

열다

Brutalist_Music_Loader

음악/오디오 플랫폼을 위한 브루탈리즘에서 영감을 받은 로딩 구성 요소로, 고대비 보라색/보라색 톤과 다크 모드를 지원하는 반응형 디자인이 특징입니다. '음악 웨이브' 또는 '재생' 로딩 상태를 시뮬레이션합니다.

열다