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

335

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

6 months ago

643
Responsive contact us section

Author:
Ron Hicks

1 year ago

11.9k
Simple Form 2

Author:
Mr Robot

2 years ago

9.2k
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

2 years ago

9.9k
Responsive login form
form with social login buttons

Author:
Aman kumar

9 months ago

3k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

1 year ago

6.7k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

11 months ago

5.3k
Credit card form

Author:
Oliver Hansen

1 year ago

14.8k
login page

Author:
Abid Ullah

2 months ago

434
Input output form

Author:
Prajwal Hallale

1 year ago

7.7k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

4.6k
Reservation form

Author:
Lukas Müller

1 year ago

11.2k

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