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

379

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

Responsive Progress Bar
This progress bar visually represents proficiency in Web Design, showing an 85% skill level. The text labels above indicate the skill area on the left and the percentage on the right for easy interpretation.

Author:
Anum Shahana

2 months ago

447
Portfolio About & Skills

Author:
Samuel Abera

1 day ago

15
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

2 years ago

10k
Article progress bar with tailwind only
On javascript needed

Author:
Samuel Dawson

2 years ago

8.6k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

1 year ago

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

Author:
Freja Jensen

2 years ago

11.7k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Author:
Abhiraj

4 days ago

86
Progress Bar
Simple Progress bar

Author:
anjali pandith

1 year ago

4.4k
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

4 days ago

46
Animated Profile Card
Animated profile card with profile completion circle

Author:
shivam vishvakarma

14 hours ago

15
Progress bars

Author:
Sophia Baker

2 years ago

9.6k
Simple progress bar component

Author:
Prajwal Hallale

1 year ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components