Home
Htmlwind
Progress bar - Htmlwind

Progress bar - Htmlwind

Simple progress bar

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

Progress Bar

Author Htmlwind

454

1

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

loader
loader

Author:
Ganesh Salunke

2 weeks ago

23
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

1 year ago

2.2k
Gradient progress bar
A progress bar with gradient

Author:
Dujardin Emmanuel

10 months ago

578
Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

4 months ago

362
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.6k
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)

9 months ago

946
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

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

642
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

1 year ago

1.6k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

1 year ago

2k
progress-bar with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

1 year ago

1k
Portfolio About & Skills

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12