Industrial_Travel_Progress_Bar
Un componente simple de barra de progreso de estilo industrial para sitios web de viajes/turismo, con un esquema de color púrpura/violeta y capacidad de respuesta completa con soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-xl bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-300 dark:border-gray-700">
<div class="p-4 sm:p-5 md:p-6 bg-gray-300 dark:bg-gray-700 border-b border-gray-400 dark:border-gray-600">
<h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">Your Travel Progress</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booking steps completed</p>
</div>
<div class="p-4 sm:p-5 md:p-6">
<div class="mb-4">
<label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Booking Confirmation (75%)</label>
<div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
<div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
</div>
</div>
<div class="mb-4">
<label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flight Selection (Complete)</label>
<div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
<div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
<svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="mb-4 last:mb-0">
<label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Accommodation (50%)</label>
<div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
<div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 50%;"></div>
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Barra de progreso Gradient Rainbow para fotografía
Un componente de barra de progreso complejo y receptivo para portafolios de fotografía, con un diseño de arco iris degradado multicolor y compatibilidad con el modo oscuro. Ideal para mostrar la carga de fotos o la progresión de la galería.
Barra de progreso de fitness deportivo en escala de grises 3D
Un complejo componente de barra de progreso en escala de grises en 3D diseñado para aplicaciones deportivas y de fitness, que muestra el progreso del entrenamiento con profundidad y compromiso visual. Incluye soporte para el modo oscuro y es totalmente responsivo.
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.