Composant de la barre de progression
Un composant de barre de progression complexe et réactif pour les services gouvernementaux/publics, avec un design épuré et minimaliste avec une palette monochrome et des accents lumineux, la prise en charge du mode sombre et des informations détaillées sur la progression.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-900 dark:text-gray-100">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-6 sm:p-8 lg:p-10">
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100 leading-tight">Application Progress Overview</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl text-base sm:text-lg">Track the current status of your public service application. Each step indicates a critical milestone in processing.</p>
<!-- Global Progress Bar -->
<div class="mb-8">
<div class="flex justify-between items-center mb-2">
<span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">Overall Completion</span>
<span class="text-xl sm:text-2xl font-bold text-teal-600 dark:text-teal-500">75%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
<div class="bg-teal-600 dark:bg-teal-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
</div>
</div>
<!-- Step-by-step Progress -->
<div class="space-y-6 sm:space-y-8">
<!-- Step 1: Completed -->
<div class="flex items-start gap-4">
<div class="flex-shrink-0 relative">
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
<svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
</div>
<div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
</div>
<div class="flex-grow pt-1">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">1. Application Submission</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application was successfully submitted on 2023-10-26.</p>
<div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Completed
</div>
</div>
</div>
<!-- Step 2: Completed -->
<div class="flex items-start gap-4">
<div class="flex-shrink-0 relative">
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
<svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
</div>
<div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
</div>
<div class="flex-grow pt-1">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">2. Document Verification</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">All submitted documents have been verified and confirmed.</p>
<div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Completed
</div>
</div>
</div>
<!-- Step 3: In Progress -->
<div class="flex items-start gap-4">
<div class="flex-shrink-0 relative">
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">3</div>
<div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
</div>
<div class="flex-grow pt-1">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">3. Review by Case Officer</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application is currently under review by a dedicated case officer. This may take up to 3-5 business days.</p>
<div class="flex items-center text-blue-600 dark:text-blue-400 mt-2 text-sm sm:text-base leading-none">
<div class="w-3 h-3 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse mr-2"></div>
In Progress
</div>
</div>
</div>
<!-- Step 4: Pending -->
<div class="flex items-start gap-4">
<div class="flex-shrink-0">
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center text-gray-500 dark:text-gray-400 text-xl sm:text-2xl font-bold">4</div>
</div>
<div class="flex-grow pt-1">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">4. Final Approval</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Awaiting final approval once the review process is complete.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 mt-2 text-sm sm:text-base">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.147-1.3 2.912 0l5.572 9.573A1.5 1.5 0 0116 14.5H4c-.848 0-1.395-.837-.943-1.628l5.572-9.573zM10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Pending
</div>
</div>
</div>
</div>
<div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium">2023-11-01, 10:30 AM (GMT+1)</span></p>
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2">For inquiries, please contact our support team at <a href="mailto:[email protected]" class="text-teal-600 dark:text-teal-500 hover:underline">[email protected]</a>.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de la barre de progression 3D
Un composant de barre de progression réactif conçu pour les interfaces de réseaux sociaux, avec un effet 3D, une palette de couleurs monochromatiques et la prise en charge du mode sombre, construit à l’aide de Tailwind CSS.
Barre de progression
Un composant de barre de progression réactif avec prise en charge du mode sombre pour le commerce électronique, avec une palette de couleurs vives et une mise en page simple.
Barre de progression minimaliste
Un composant de barre de progression au design minimaliste et plat aux couleurs pastel, adapté aux sites Web professionnels d’entreprise ou d’entreprise. Il a un design réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.