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

761

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

3 months ago

535
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

13.1k
Progress Bar
Simple Progress bar

Author:
anjali pandith

1 year ago

4.4k
Profile Form
Progressive Profile Form

Author:
Samuel Abera

7 months ago

2.5k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Samuel Abera

8 months ago

6.1k
Credit / Debit card payment information form

Author:
Santos78

1 year ago

18k
Contact Form

Author:
Sophia Baker

1 year ago

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

Author:
ardianhu

5 months ago

1.3k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

9.6k
Profile Form
Stunning Profile and Cover Image Fields

Author:
Samuel Abera

8 months ago

3.1k
Forgot password form (fullscreen)

Author:
Prajwal Hallale

1 year ago

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

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.9