Tailwind CSS Progress Bar

Use responsive progress component with helper examples for progress ui, progress bar, progress bar steps, colors & more. Free download, open-source license.

Basic example

The progress component is mainly used to indicate the progress of a task, usually displayed as a progress bar.

Use a progress bar element to display a percentage completion rate by using an inline style and the utility classes.

HTML

        
            
      <div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary" style="width: 45%"></div>
      </div>

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Width

Change the width style property to your level of progress completion.

HTML

        
            
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary" style="width: 0%"></div>
      </div>
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary" style="width: 25%"></div>
      </div>
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary" style="width: 50%"></div>
      </div>
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary" style="width: 75%"></div>
      </div>
      <div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary" style="width: 100%"></div>
      </div>

Labels

Use a progress bar with the label inside the bar.

25%

HTML

        
            
      <div class="w-full bg-neutral-200 dark:bg-neutral-600">
        <div
          class="bg-primary p-0.5 text-center text-xs font-medium leading-none text-primary-100"
          style="width: 25%">
          25%
        </div>
      </div>

Height

Use different sizes by with various sizing utility classes.

HTML

        
            
      <div class="mb-6 h-px w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-px bg-primary" style="width: 25%"></div>
      </div>
      <div class="mb-6 h-5 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-5 bg-primary" style="width: 25%"></div>
      </div>

Colors

To apply different colors to your progress bars, just add the .bg-green-500, .bg-primary-500, .bg-yellow-500 or .bg-red-500 class.

HTML

        
            
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-green-500" style="width: 25%"></div>
      </div>
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-primary-400" style="width: 50%"></div>
      </div>
      <div class="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-yellow-500" style="width: 75%"></div>
      </div>
      <div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
        <div class="h-1 bg-red-600" style="width: 100%"></div>
      </div>

Progress bar

Basic example

Width

Labels

Height

Colors

Access restricted

To view this section you must have an active PRO account

Progress bar

Tailwind CSS Progress Bar

Basic example

Width

Labels

Height

Colors

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):