Brutalist_Music_Loader

适用于音乐/音频平台的野兽派风格加载组件，具有高对比度的紫色/紫色色调和响应式设计，支持深色模式。模拟 'music wave' 或 'playback' 加载状态。
预览

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

预览

HTML 代码

相关组件

加载器组件

拟物加载器

Loaders 组件
