Home
Anum Shahana
Responsive Progress bars

Responsive Progress bars

This tailwind example is contributed by Anum Shahana, on 03-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Progress Bar

Author Anum Shahana

1.2k

Fork Fullscreen

<div class="flex flex-col md:flex-row p-6 space-y-2 md:space-y-0 md:space-x-4 mt-20">
   
  <div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Web Design</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[75%]"></div>
    </div>
  </div>
  
   
  <div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Development</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[50%]"></div>
    </div>
  </div>

<div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">SEO</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[85%]"></div>
    </div>
  </div>

<div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Marketing</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[60%]"></div>
    </div>
  </div>

<div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Content</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[90%]"></div>
    </div>
  </div>
</div>

Related Examples

Progress bar - Htmlwind
Simple progress bar

Author:
Htmlwind

5 months ago

333
Progress bars

Author:
Sophia Baker

2 years ago

10.6k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

10 months ago

2k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

717
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

9 months ago

1.9k
Simple progress bar component

Author:
Prajwal Hallale

2 years ago

7.5k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

10 months ago

1.8k
progress-bar with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

10 months ago

1.5k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.9k
Article progress bar with tailwind only
On javascript needed

Author:
Samuel Dawson

2 years ago

9.5k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

8 months ago

959

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components