구성 요소 로더 뉴모피즘 로더

뉴모피즘 로더

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>

뉴모피즘 로더

미리 보기

HTML 코드

관련 구성 요소

로더 구성 요소

로더 구성 요소

로더 구성 요소