Home
Quêmia
progress-bar with Tailwind CSS and Alpinejs

progress-bar with Tailwind CSS and Alpinejs

Forked from> @michael-andreuzza/progress-bar-with-tailwind-css-and-alpinejs

This tailwind example is contributed by Quêmia, on 19-Aug-2024. Component is made with Tailwind CSS v3. It is responsive.

Form Progress Bar

Author Quêmia

1.9k

Fork Fullscreen

<script
  defer
  src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
<section class="bg-white">
  <div
    class="w-full mx-auto max-w-xl flex flex-col lg:h-svh justify-center py-24 lg:py-96 relative p-8"
  >
    <div
      class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl"
    >
      <div>
        <h1>Progress bar</h1>
        <p class="text-balance">A progress that loads when the page loads.</p>
      </div>
    </div>
    <div class="mt-6 border-t pt-12">
      
      <div
        x-data="{ progress: 0, interval: null }"
        x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }"
        class="w-full"
      >
        <div class="text-sm text-gray-500" x-text="progress + '%'">100%</div>
        <div class="relative h-1 mt-2 bg-gray-200 rounded-full">
          <div
            x-bind:style="'width: ' + progress + '%;'"
            class="absolute top-0 left-0 h-full bg-orange-500 rounded-full"
            style="width: 100%"
          ></div>
        </div>
      </div>
      
    </div>
  </div>
  
  <div
    class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2"
  >
    <div
      class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border"
    >
      <div class="flex w-0 flex-1 items-center p-4">
        <div class="w-full">
          <p class="text-sm font-medium text-neutral-900">Tutorial</p>
          <p class="mt-1 text-sm text-neutral-500">
            How to create a progress-bar with Tailwind CSS and Alpinejs
          </p>
          <p class="mt-2 text-xs text-orange-500 underline">
            <a href="https://lexingtonthemes.com"> by © Lexington Themes</a>
          </p>
        </div>
      </div>
      <div class="flex">
        <div class="flex flex-col divide-y divide-neutral-200">
          <div class="flex h-0 flex-1">
            <a
              href="https://lexingtonthemes.com/tutorials/how-to-create-a-progress-bar-with-tailwind-css-and-alpine-js/"
              type="button"
              class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500"
              >Tutorial</a
            >
          </div>
          <div class="flex h-0 flex-1">
            <a
              href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/progress-bar/index.astro"
              class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
              >Get the code</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>

Related Examples

progress-bar with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

9 months ago

1.6k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

5 months ago

763
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

50
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

2 years ago

12.7k
Confirm OTP Form
can be used as a reset password form

Author:
Santos78

2 years ago

10.6k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

6 months ago

587
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

3 years ago

23.3k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

3.9k
Tag input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

4 months ago

570
Feedback Form

Author:
JaxStone

2 years ago

14.7k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12