Home
Quêmia
progress-bar with Tailwind CSS and Alpinejs

progress-bar with Tailwind CSS and Alpinejs

Forked from> @michael-andreuzza/progress-bar-with-tailwind-css-and-alpinejs

This tailwind example is contributed by Quêmia, on 19-Aug-2024. Component is made with Tailwind CSS v3. It is responsive.

Form Progress Bar

Author Quêmia

535

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:
Michael Andreuzza

7 months ago

761
Progress spinner

Author:
Md. Tofayel islam

8 months ago

1.1k
Simple login form

Author:
R Thapa

1 year ago

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

45.6k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

1 year ago

11.6k
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

6 months ago

829
Search form section with a background SVG gradient

Author:
TailwindFlex

1 year ago

12.9k
Contact me form
contact me form

Author:
Geoffrey Callaghan

1 year ago

5.7k
Sign in form
simple full-height login form

Author:
Lukas Müller

1 year ago

8.3k
Article progress bar with tailwind only
On javascript needed

Author:
Samuel Dawson

1 year ago

8.4k
Verify otp form

Author:
Jakub Novak

1 year ago

15.9k
Upload file input field

Author:
Gopi Yadav

1 year ago

12.2k

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