Progress

View component on Github This page on Github

Example

<div x-data="{ model: 20 }">
  <div
    x-data="progress"
    x-model="model"
    class="flex h-4 overflow-hidden rounded-full bg-secondary-100 dark:bg-dark-800"
  >
    <div
      x-bind="progressBar"
      class="flex h-full items-center justify-center rounded-full bg-primary-400"
    ></div>
  </div>
</div>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/progress/dist/cdn.min.js"></script>

The data for the component is provided by the progress function in the x-data directive and the props in the data-* attributes.

Props


          data-interactive


            false


            Boolean

If this prop is enabled, clicking on progress will dispatch progress-clicked event with the clicked position as a value from 0 to 1.

x-model


          x-model


            String


            Array

Current progress in percent.

Indeterminate progress

Example

<div
  class="relative flex h-1 overflow-hidden rounded-full bg-secondary-100 dark:bg-dark-800"
>
  <div
    class="absolute flex h-full w-[70%] origin-left animate-progress items-center justify-center rounded-full bg-linear-to-r from-yellow-400 via-orange-500 to-red-500"
  ></div>
</div>

Litewind-alpine 0.1.0

Components Documentation

Contents