<div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-4/12 rounded-full bg-slate-500 dark:bg-navy-400"></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-5/12 rounded-full bg-primary dark:bg-accent"></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-6/12 rounded-full bg-secondary"></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-7/12 rounded-full bg-info"></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-8/12 rounded-full bg-success"></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-9/12 rounded-full bg-warning"></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div class="w-10/12 rounded-full bg-error"></div>
  </div>
              

                
  <div class="progress h-2 bg-primary/15 dark:bg-accent/25">
    <div class="w-5/12 rounded-full bg-primary dark:bg-accent"></div>
  </div>
  <div class="progress h-2 bg-secondary/15 dark:bg-secondary-light/25">
    <div class="w-6/12 rounded-full bg-secondary"></div>
  </div>
  <div class="progress h-2 bg-info/15 dark:bg-info/25">
    <div class="w-7/12 rounded-full bg-info"></div>
  </div>
  <div class="progress h-2 bg-success/15 dark:bg-success/25">
    <div class="w-8/12 rounded-full bg-success"></div>
  </div>
  <div class="progress h-2 bg-warning/15 dark:bg-warning/25">
    <div class="w-9/12 rounded-full bg-warning"></div>
  </div>
  <div class="progress h-2 bg-error/15 dark:bg-error/25">
    <div class="w-10/12 rounded-full bg-error"></div>
  </div>
              

                
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div
      class="w-5/12 rounded-full bg-primary dark:bg-accent"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="w-5/12 rounded-full bg-primary dark:bg-accent"
    ></div>
  </div>
  <div class="progress h-3 bg-slate-150 dark:bg-navy-500">
    <div
      class="w-5/12 rounded-full bg-primary dark:bg-accent"
    ></div>
  </div>
  <div class="progress h-4 bg-slate-150 dark:bg-navy-500">
    <div
      class="w-5/12 rounded-full bg-primary dark:bg-accent"
    ></div>
  </div>

                
              

                
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-4/12 overflow-hidden rounded-full bg-slate-500 dark:bg-navy-400"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-5/12 overflow-hidden rounded-full bg-primary dark:bg-accent"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-6/12 overflow-hidden rounded-full bg-secondary"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-7/12 overflow-hidden rounded-full bg-info"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-8/12 overflow-hidden rounded-full bg-success"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-9/12 overflow-hidden rounded-full bg-warning"
    ></div>
  </div>
  <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-active relative w-10/12 overflow-hidden rounded-full bg-error"
    ></div>
  </div>

              

                
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-indeterminate relative w-4/12 rounded-full bg-slate-500 dark:bg-navy-400"
    ></div>
  </div>
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-indeterminate relative w-4/12 rounded-full bg-primary dark:bg-accent"
    ></div>
  </div>
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div
      class="is-indeterminate relative w-4/12 rounded-full bg-secondary"
    ></div>
  </div>
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div class="is-indeterminate relative w-4/12 rounded-full bg-info"></div>
  </div>
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div class="is-indeterminate relative w-4/12 rounded-full bg-success"></div>
  </div>
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div class="is-indeterminate relative w-4/12 rounded-full bg-warning"></div>
  </div>
  <div class="progress h-1 bg-slate-150 dark:bg-navy-500">
    <div class="is-indeterminate relative w-4/12 rounded-full bg-error"></div>
  </div>