Composants Indicateurs de progrès Volet Indicateurs de progrès industriel
Volet Indicateurs de progrès industriel

Un composant complexe et contrasté d’indicateurs de progression avec une esthétique de design industriel, adapté aux sites Web d’entreprise. Comprend plusieurs barres de progression, une section d’état détaillée et des textures de matières premières, entièrement réactives avec la prise en charge du mode sombre.
Aperçu

HTML Code

<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>
Composants associés

Volet Indicateurs de progrès

Un composant d’indicateur de progression minimaliste conçu pour mettre en valeur la progression du portefeuille à l’aide de couleurs vives et d’un design réactif avec prise en charge du thème sombre.
Ouvrir
Indicateurs de progrès agricole Cyberpunk

Un ensemble d’indicateurs de progression futuristes, sur le thème du cyberpunk, pour un site Web agricole ou agricole, avec des tons chauds de coucher de soleil. Réactif avec prise en charge du mode sombre.
Ouvrir
Volet Indicateurs de progrès

Un composant d’indicateur de progression réactif avec un design brutalisme, des tons de couleur terreux et une prise en charge du thème sombre, adapté à un blog ou à un site de contenu.
Ouvrir