AnthoLume/templates/components/download-progress.tmpl

<div
  class="absolute -translate-y-1/2 p-4 m-auto bg-gray-700 dark:bg-gray-300 rounded-lg shadow w-full text-black dark:text-white"
>
  <span
    class="inline-flex gap-2 items-center font-medium text-xs inline-block py-1 px-2 uppercase rounded-full {{ if .Error }}
      bg-red-500
    {{ else if true }}
      bg-green-600
    {{ end }}"
  >
    {{ if and (ne .Progress 100) (not .Error) }}
      {{ template "svg/loading" (dict "Size" 16) }}
    {{ end }}
    {{ .Message }}
  </span>
  <div class="flex flex-col gap-2 mt-2">
    <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
      {{ if .Error }}
        <div
          class="absolute h-full bg-red-500 rounded-full"
          style="width: 100%"
        ></div>
        <p class="absolute w-full h-full font-bold text-center text-xs">
          ERROR
        </p>
      {{ else }}
        <div
          class="absolute h-full bg-green-600 rounded-full"
          style="width: {{ .Progress }}%"
        ></div>
        <p class="absolute w-full h-full font-bold text-center text-xs">
          {{ .Progress }}%
        </p>
      {{ end }}
    </div>
    <a
      href="{{ .ButtonHref }}"
      class="w-full text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
      >{{ .ButtonText }}</a
    >
  </div>
</div>