Progress Indicators Component
A retro/vintage styled progress indicators component featuring responsive design and dark theme support using Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
<div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
</div>
<div class="mt-6">
<img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
</div>
<div class="mt-6">
<img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
</div>
</div>Related Components
Progress Indicators Component
A responsive Progress Indicators Component designed for a Dark Mode UI dashboard with an analogous color scheme. It includes various progress indicators like bars, circles, and an activity feed, all styled with Tailwind CSS for dark mode support. No JavaScript is used.
Progress Indicators Component
A simple progress indicator designed with a glassmorphism effect, suitable for e-commerce websites with dark mode support and a monochromatic color scheme.
Progress Indicators Component
A minimalist progress indicator component designed to showcase portfolio progress using vibrant colors and responsive design with dark theme support.