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 want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

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

Related resources

Tutorials:

Extended Docs:

Design System (Figma):