Home
Michael Andreuzza
progress-bar with Tailwind CSS and Alpinejs

progress-bar with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Form Progress Bar

Author Michael Andreuzza

1.4k

1

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:
Quêmia

7 months ago

1.1k
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
Form for editing items

Author:
Sophia Baker

2 years ago

15.9k
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

2 years ago

10.2k
Simple login form

Author:
Freja Jensen

2 years ago

10.3k
Responsive contact us section

Author:
Ron Hicks

2 years ago

13.4k
Status bar

Author:
Maxim

3 months ago

395
Progress spinner

Author:
Md. Tofayel islam

1 year ago

1.8k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

1 month ago

322
Input output form

Author:
Prajwal Hallale

2 years ago

7.8k
Text Rpg UI

Author:
Crimson

3 months ago

298
Simple login form

Author:
R Thapa

1 year ago

19.8k

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