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