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

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

6 months ago

889
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

1 month ago

332
Login form

Author:
Leon Bachmann

2 years ago

12k
Search form section with a background SVG gradient

Author:
TailwindFlex

2 years ago

13.4k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

8 months ago

1.8k
Feedback form with fabform.io
Collect opinions about your company's service

Author:
Ho O

1 month ago

225
Reservation form

Author:
Lukas Müller

2 years ago

11.9k
Upload file input field

Author:
Gopi Yadav

2 years ago

12.9k
Simple login form

Author:
Freja Jensen

2 years ago

10k
Feedback Form

Author:
JaxStone

2 years ago

14k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

8 months ago

1.7k
Login Form

Author:
Amit Pachange

2 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ 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