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

8 months ago

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

2 months ago

678
Sign up form

Author:
Rajesh Maheshwari

1 month ago

231
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.2k
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

11.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

2 years ago

48.1k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

9 months ago

2.3k
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

1 year ago

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

1 year ago

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

2 years ago

21k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

1 year ago

5.5k
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

11.3k

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