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>