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 v3.4. It is responsive.

Form Progress Bar

Author Quêmia

Tailwind v3.4 2.4k 4

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

Michael Andreuzza

2 years ago

2.7k
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.

Ayyamperumal S

1 year ago

2.6k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Nicole Shalom

1 year ago

1.8k
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

1 month ago

54
Responsive login form
form with social login buttons

Anonymous

9 months ago

565
Registration form

Juan D. Cortorreal

10 months ago

644
Sign in form
simple full-height login form

Lukas Müller

3 years ago

10.5k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Appointment booking form

Leif99

3 years ago

18.5k
loader
loader

Ganesh Salunke

8 months ago

926
Simple login form

Freja Jensen

3 years ago

11.7k
form text

Severino Victtorino

1 year ago

1.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.