Componente de Indicadores de Progreso Industrial
Un componente de indicadores de progreso complejo y de alto contraste con una estética de diseño industrial, adecuado para sitios web comerciales/corporativos. Cuenta con múltiples barras de progreso, una sección de estado detallada y texturas de materia prima, totalmente receptivas con soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-2 tracking-tight">Project Status Overview</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg">Comprehensive progress tracking for 'Aurora Borealis' initiative.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-2 sm:gap-4 p-4 sm:p-6 md:p-8">
<!-- Left Column: Primary Progress Indicators -->
<div class="lg:col-span-2 space-y-6 sm:space-y-8">
<!-- Overall Project Progress -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
Overall Project Progress
</h3>
<div class="mb-2 flex justify-between items-center">
<span class="text-lg font-medium text-blue-700 dark:text-blue-300">75% Complete</span>
<span class="text-sm text-gray-500 dark:text-gray-400">Target: 90% by EOM</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-blue-600 dark:bg-blue-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Last Updated: 2 min ago</p>
</section>
<!-- Key Milestones Progress -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Key Milestones
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 1: Design & Planning</span>
<span class="text-md font-medium text-emerald-600 dark:text-emerald-400">100%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-emerald-600 dark:bg-emerald-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 2: Development & Integration</span>
<span class="text-md font-medium text-yellow-600 dark:text-yellow-400">60%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-yellow-600 dark:bg-yellow-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 60%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 3: Testing & Deployment</span>
<span class="text-md font-medium text-red-600 dark:text-red-400">20%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 20%;"></div>
</div>
</div>
</div>
</section>
<!-- Resource Utilization -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
Resource Utilization
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Budget Allocation</span>
<span class="text-md font-medium text-orange-600 dark:text-orange-400">85% Used</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-orange-600 dark:bg-orange-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 85%;"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-md font-medium text-gray-700 dark:text-gray-300">Team Workload</span>
<span class="text-md font-medium text-green-600 dark:text-green-400">70% Capacity</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
<div class="bg-green-600 dark:bg-green-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 70%;"></div>
</div>
</div>
</div>
</section>
</div>
<!-- Right Column: Status & Updates -->
<div class="lg:col-span-1 space-y-6 sm:space-y-8">
<!-- Project Status Board -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L12 20L15 17M9 7L12 4L15 7M21 12H3"></path></svg>
Current Status
</h3>
<dl class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Overall Health:</dt>
<dd class="font-semibold text-lg text-emerald-600 dark:text-emerald-400">Stable</dd>
</div>
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Next Deadline:</dt>
<dd class="font-semibold text-lg text-blue-600 dark:text-blue-400">Feb 28, 2024</dd>
</div>
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Critical Issues:</dt>
<dd class="font-semibold text-lg text-red-600 dark:text-red-400">2 Open</dd>
</div>
<div class="flex justify-between py-3">
<dt class="text-gray-600 dark:text-gray-400">Team Capacity:</dt>
<dd class="font-semibold text-lg text-orange-600 dark:text-orange-400">Stretched</dd>
</div>
</dl>
</section>
<!-- Recent Activity -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Recent Activity
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-purple-500"></div>
<div>
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Dev Team</span> updated 'Auth Module' to 90%.</p>
<time datetime="2024-02-20" class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</time>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-orange-500"></div>
<div>
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">QA Team</span> reported 2 critical bugs in 'Payment Gateway'.</p>
<time datetime="2024-02-19" class="text-sm text-gray-500 dark:text-gray-400">Yesterday</time>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-emerald-500"></div>
<div>
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Project Manager</span> approved 'Phase 1' completion.</p>
<time datetime="2024-02-18" class="text-sm text-gray-500 dark:text-gray-400">2 days ago</time>
</div>
</li>
</ul>
</section>
<!-- Team Members -->
<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<svg class="w-7 h-7 mr-3 text-sky-600 dark:text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857A2.75 2.75 0 1011 4.252A2.75 2.75 0 0017 17.009zM2 13V7a3 3 0 015.356-1.857M2 13v6a3 3 0 005.356 1.857"></path></svg>
Core Team
</h3>
<div class="flex flex-wrap gap-3">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
<img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400" src="https://randomuser.me/api/portraits/men/83.jpg" alt="Avatar of David Lee">
<img class="w-12 h-12 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Emily White">
<img class="w-12 h-12 rounded-full object-cover border-2 border-orange-500 dark:border-orange-400" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar of Michael Brown">
<a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold text-lg border-2 border-gray-400 dark:border-gray-500 transition-colors hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="View all team members">+5</a>
</div>
</section>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de Indicadores de Progreso
Un componente indicador de progreso receptivo con diseño brutalista, tonos de color terrosos y soporte para temas oscuros, adecuado para un blog o sitio de contenido.
Componente de Indicadores de Progreso
Un componente de indicadores de progreso inspirado en Material Design con efectos responsivos y compatibilidad con temas oscuros, creado con Tailwind CSS.
Componente de Indicadores de Progreso
Un componente de indicadores de progreso receptivo con estilo de cristal, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, que admite el tema oscuro con Tailwind CSS.