Brutalist_Music_Loader
음악/오디오 플랫폼을 위한 브루탈리즘에서 영감을 받은 로딩 구성 요소로, 고대비 보라색/보라색 톤과 다크 모드를 지원하는 반응형 디자인이 특징입니다. '음악 웨이브' 또는 '재생' 로딩 상태를 시뮬레이션합니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-neutral-100 dark:bg-neutral-900 p-4 font-mono select-none overflow-hidden">
<div class="relative w-full max-w-sm md:max-w-md lg:max-w-lg bg-pink-300 dark:bg-purple-950 border-4 border-neutral-900 dark:border-pink-300 shadow-[8px_8px_0_0_#171717] dark:shadow-[8px_8px_0_0_#fbcfe8] p-6 sm:p-8 flex flex-col items-center justify-center space-y-8 rounded-none">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-neutral-900 dark:text-pink-300 uppercase tracking-tighter text-center leading-none mt-2">
Loading //
</h1>
<div class="w-full flex justify-center items-center h-24 space-x-2 md:space-x-3 mb-4">
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-1"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-2"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-3"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-4"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-5"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-6"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-7"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-8"></div>
<div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-9"></div>
</div>
<p class="text-lg sm:text-xl font-bold text-neutral-900 dark:text-pink-300 uppercase text-center border-b-4 border-neutral-900 dark:border-pink-300 pb-1 mt-4">
Stand by for sonic assault.
</p>
<div class="absolute bottom-2 right-2 text-neutral-900 dark:text-pink-300 text-xs sm:text-sm font-semibold tracking-wide">
[v.2.0.24]
</div>
</div>
<style>
@keyframes brutalist-wave {
0%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1); }
40% { transform: scaleY(0.2); }
60% { transform: scaleY(0.7); }
80% { transform: scaleY(0.4); }
}
.animate-brutalist-wave-1 { animation: brutalist-wave 1.8s ease-in-out infinite; }
.animate-brutalist-wave-2 { animation: brutalist-wave 1.8s ease-in-out infinite 0.1s; }
.animate-brutalist-wave-3 { animation: brutalist-wave 1.8s ease-in-out infinite 0.2s; }
.animate-brutalist-wave-4 { animation: brutalist-wave 1.8s ease-in-out infinite 0.3s; }
.animate-brutalist-wave-5 { animation: brutalist-wave 1.8s ease-in-out infinite 0.4s; }
.animate-brutalist-wave-6 { animation: brutalist-wave 1.8s ease-in-out infinite 0.5s; }
.animate-brutalist-wave-7 { animation: brutalist-wave 1.8s ease-in-out infinite 0.6s; }
.animate-brutalist-wave-8 { animation: brutalist-wave 1.8s ease-in-out infinite 0.7s; }
.animate-brutalist-wave-9 { animation: brutalist-wave 1.8s ease-in-out infinite 0.8s; }
</style>
</div>