Lineone - Progress Element

Progress

Elements
Progress

Basic Progress

Code

The Progress component displays a colored loading bar. Check out code for detail of usage.

                
  <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>

Soft Color Progress

Code

Progress can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.

                
  <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>

Progress Size

Code

The Progress components can have various sizes. Check out code for detail of usage.

                
  <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>

Active Progress

Code

An indicating progress bar visually indicates the current level of progress of a task. Check out code for detail of usage.

                
  <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>

Progress Indeterminate

Code

You can use indeterminate mode for the progress bar when you do not know how long an operation will take. Check out code for detail of usage.

                
  <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>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Progress

Basic Progress

Soft Color Progress

Progress Size

Active Progress

Progress Indeterminate