Barra de progreso neo-retro de Cyberpunk
Un componente de barra de progreso de complejidad moderada con una estética cyberpunk, neo-retro, fondos oscuros y colores de acento vintage apagados, diseñado para plataformas de entretenimiento/medios. Cuenta con una pantalla de progreso segmentada y es totalmente sensible con soporte para el modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-[#1a1a2e] dark:bg-gray-900 min-h-screen flex items-center justify-center font-mono text-gray-200">
<div class="w-full max-w-2xl bg-[#0f0f20] dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-[#00f7ff33] dark:border-gray-700">
<div class="p-4 sm:p-6 md:p-8 relative">
<div class="text-lg sm:text-xl md:text-2xl font-bold text-[#00f7ff] dark:text-[#a0a0ff] mb-4 sm:mb-6 uppercase tracking-wider before:content-[''] before:absolute before:left-0 before:top-0 before:w-1 before:h-full before:bg-[#00f7ff]">Now Playing: Interstellar Echoes</div>
<p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8">Track 3 of 12 - Dreamscape Protocol</p>
<!-- Progress Bar Container -->
<div class="w-full bg-[#3c3c5a] dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative mb-4 sm:mb-6">
<div class="absolute top-0 left-0 h-full rounded-full transition-all duration-500 ease-out"
style="width: 65%; background-color: #ff5757; box-shadow: 0 0 8px #ff5757, 0 0 16px #ff5757;"
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar">
</div>
<div class="absolute top-0 left-1/3 w-1 bg-gray-500 rounded-full h-full"></div>
<div class="absolute top-0 left-2/3 w-1 bg-gray-500 rounded-full h-full"></div>
</div>
<!-- Time Display -->
<div class="flex justify-between text-xs sm:text-sm text-gray-400 mb-6 sm:mb-8">
<span class="text-[#ff5757]">02:45</span>
<span>04:10</span>
</div>
<!-- Control Buttons -->
<div class="flex justify-center items-center space-x-6 sm:space-x-8 text-xl sm:text-2xl">
<button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Previous Track">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
</button>
<button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-full p-2 sm:p-3 border border-[#82e0ff] dark:border-[#c0c0ff] hover:border-[#00f7ff] dark:hover:border-[#a0a0ff] shadow-md shadow-[#82e0ff]/30">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.125l-3.359-3.359A.858.858 0 0010 8.358v7.284a.858.858 0 001.393.616l3.359-3.359a.858.858 0 00-.001-1.234zM12 21a9 9 0 110-18 9 9 0 010 18z" />
</svg>
</button>
<button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Next Track">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Barra de progreso minimalista
Un componente de barra de progreso de diseño minimalista y plano con colores pastel, adecuado para sitios web profesionales de negocios o corporativos. Tiene un diseño responsivo y admite el modo oscuro usando Tailwind CSS.
Componente de la barra de progreso del modo oscuro
Un componente de barra de progreso de modo oscuro receptivo para sitios web comerciales / corporativos, que utiliza colores vibrantes y elementos interactivos.
Organic_Nature_ProgressBar
Un componente de barra de progreso de temática retro inspirado en la naturaleza para aplicaciones industriales y de fabricación, con líneas fluidas, colores apagados y compatibilidad con el modo oscuro.