Progress Bar

<!-- Progress Bar -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  class="flex flex-col gap-5 rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 px-4 py-44 dark:border-zinc-700 dark:bg-zinc-950/25 sm:px-12 lg:px-16"
>
  <div
    x-data="{
      progress: 0,
      demo: false,
      
      // Helpers
      interval: null,

      // Initial functionality
      init() {
        if (this.demo) {
          this.demoProgress();
        }
      },

      // Reset progress bar
      resetProgress() {
        clearInterval(this.interval);
        this.progress = 0;
      },

      // Demo Progress
      demoProgress() {
        this.interval = setInterval(() => {
          this.progress ? this.progress *= 1.06 : this.progress = 0.5;

          if (this.progress >= 100) {
            this.progress = 100;
            clearInterval(this.interval);
          }
        }, 50);
      }
    }"
  >
    <h3
      class="flex h-10 items-center justify-center text-center text-sm font-semibold"
    >
      <span
        x-show="progress === 100"
        x-cloak
        class="inline-flex items-center gap-1"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="hi-solid hi-check inline-block size-6 text-teal-500"
        >
          <path
            fill-rule="evenodd"
            d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
            clip-rule="evenodd"
          />
        </svg>
        <span>Done!</span>
      </span>
      <span x-text="progress === 100 ? '' : Math.trunc(progress) + '%'"></span>
    </h3>
    <div
      class="flex h-1 w-full items-center overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800"
    >
      <div
        role="progressbar"
        class="flex items-center justify-center self-stretch rounded-full bg-teal-500 text-xs font-medium text-white transition-all duration-500 ease-out"
        aria-valuemin="0"
        aria-valuemax="100"
        x-bing:aria-valuenow="progress"
        x-bind:style="'width: ' + progress + '%;'"
      ></div>
    </div>
    <div class="flex flex-wrap items-center justify-center gap-2 pt-5">
      <button
        x-on:click="progress === 0 ? demoProgress() : resetProgress()"
        type="button"
        class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white open:border-zinc-700 open:bg-zinc-700 hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:open:border-zinc-700/50 dark:open:bg-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75"
      >
        <span x-text="progress === 0 ? 'Start demo' : 'Reset progress'"></span>
      </button>
    </div>
  </div>
</div>
<!-- END Progress Bar -->