Progressbar

A progress bar displays the status of a given process.

Example

Determinate progress bars fill the container from 0 to 100%. This reflects the progress of the process.

<div class="w-full bg-gray-200 rounded-full h-1.5">
                          <div class="bg-indigo-600 h-1.5 rounded-full" style="width: 15%"></div>
                        </div>

Color variants

Change the appearance of individual progress bars.


                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-indigo-600 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>
                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-gray-300 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>
                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-teal-500 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>
                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-blue-500 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>
                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-red-500 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>
                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>
                          <div class="w-full bg-gray-200 rounded-full h-1.5">
                             <div class="bg-gray-800 h-1.5 rounded-full" style="width: 15%"></div>
                          </div>