Progress bar - Htmlwind

Simple progress bar

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Progress Bar

Author Htmlwind

Tailwind v3.4 822 2

Fork Fullscreen

<div class="bg-white">
  <div class="flex justify-center py-12">
    <nav aria-label="Progress">
      <ol role="list" class="flex items-center gap-x-4 sm:gap-x-8">
        <li>
          <a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
            <svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor"></path>
            </svg>
            <span class="sr-only">Step 1</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
            <svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor"></path>
            </svg>
            <span class="sr-only">Step 2</span>
          </a>
        </li>
        <li>
          <a href="#" aria-current="step" class="flex size-8 items-center justify-center rounded-full bg-pink-500 ring-2 ring-pink-400 ring-offset-2">
            <span aria-hidden="true" class="size-2.5 rounded-full bg-white"></span>
            <span class="sr-only">Step 3</span>
          </a>
        </li>
        <li>
          <a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
            <span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
            <span class="sr-only">Step 4</span>
          </a>
        </li>
        <li>
          <a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
            <span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
            <span class="sr-only">Step 5</span>
          </a>
        </li>
      </ol>
    </nav>
  </div>
</div>

Related Examples

Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

3 weeks ago

33
Progress bar

Rajesh Maheshwari

1 year ago

1.6k
Portfolio About & Skills

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

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

Freja Jensen

3 years ago

13.4k
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.

Ayyamperumal S

1 year ago

2.6k
Gradient progress bar

Kofi Osei

3 years ago

15.8k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Progress bars

Sophia Baker

3 years ago

11.4k
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.

ABDO-SY

1 year ago

1.6k
Responsive Progress bars

Anum Shahana

1 year ago

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

Shivam Vishwakarma

1 year ago

2.2k
Progress Bar
Simple Progress bar

anjali pandith

2 years ago

6.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.