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

643

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

335
contact form
contact form

Author:
Geoffrey Callaghan

1 year ago

5.3k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

13.6k
Upload file input field

Author:
Gopi Yadav

1 year ago

12.1k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

6 months ago

1.5k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

1 year ago

6.7k
Sign up form
simple full-height register form

Author:
Lukas Müller

1 year ago

10.5k
Simple contact us form

Author:
Geoffrey Callaghan

1 year ago

5.3k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

1 year ago

10.3k
damatebis forma

Author:
Tamaz gogitidze

2 months ago

349
User registration form with Instructions

Author:
Fagundo67

1 year ago

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

Author:
seth dridi

3 months ago

666

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ 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.8