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>