Brutalist_Music_Loader
Un composant de chargement d’inspiration brutaliste pour les plates-formes musicales/audio, avec des tons violet/violet très contrastés et un design réactif avec prise en charge du mode sombre. Simule un état de chargement « vague musicale » ou « lecture ».
HTML Code
<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>Composants associés
E-commerce Automne Dark Loader
Un composant de chargeur réactif pour les applications de commerce électronique, avec des couleurs d’automne sur un fond sombre, conçu pour réduire la fatigue oculaire. Comprend trois animations de chargeur distinctes.
Composant de chargement Glassmorphism
Un composant de chargeur simple, de style glassmorphism, avec des couleurs complémentaires, adapté à un portefeuille, avec une prise en charge réactive et en mode sombre.
Composant des chargeurs
Un composant Loaders conçu dans un style brutaliste avec un accent sur l’interactivité pour les sites Web d’entreprise/d’entreprise, avec une palette de couleurs analogue et un design réactif avec prise en charge du mode sombre. Le design présente différentes animations de chargeur qui capturent l’esthétique audacieuse et brute du brutalisme.