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

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

11 months ago

1.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.

Author:
Ayyamperumal S

2 months ago

643
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.1k
Reservation form

Author:
Lukas Müller

2 years ago

12.4k
Survey form
User survey form

Author:
JaxStone

2 years ago

15k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

14.1k
Register form

Author:
Maxim

3 months ago

618
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

1 year ago

12.6k
Progress bar

Author:
Rajesh Maheshwari

1 month ago

328
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

1 year ago

7.7k
update user
it is the layout for creating an event

Author:
seth dridi

7 months ago

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

3 months ago

878

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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.1