Components
Progress

Components

Tailwind CSS Progress

Tailwind CSS progress bar reflects the completion of a task or a process. Explore horizontal, circular or vertical bar component with various label styles.

Example

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

Theme:

Height

We only set a height value on the progress, so if you change that value the inner progress bar will automatically resize accordingly.

Theme:

<div class="flex w-full h-4 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-6 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
                      </div>

Labels

Within progress bar

Add labels to your progress bars by placing text within the progress bar.

Theme:

<div class="flex w-full h-4 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 50%">50%</div>
                      </div>

<div class="flex w-full h-4 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 75%">75%</div>
                      </div>

<div class="flex w-full h-4 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%">100%</div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex w-full h-4 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 25%">25%</div>
                      </div>

<div class="flex w-full h-4 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 50%">50%</div>
                      </div>

Label at the end

Place label at the end of a progress.

Theme:

<div class="flex items-center gap-x-3 whitespace-nowrap">
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-red-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 80%"></div>
                        </div>
                        <span class="sr-only">80%</span>
                        <div class="w-10 text-end">
                          <span class="shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-red-500 text-foreground-inverse">
                            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </span>
                        </div>
                      </div>

<div class="flex items-center gap-x-3 whitespace-nowrap">
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                        </div>
                        <span class="sr-only">100%</span>
                        <div class="w-10 text-end">
                          <span class="shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-teal-500 text-foreground-inverse">
                            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                          </span>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex items-center gap-x-3 whitespace-nowrap">
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                        </div>
                        <span class="sr-only">100%</span>
                        <div class="w-10 text-end">
                          <span class="shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-teal-500 text-foreground-inverse">
                            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                          </span>
                        </div>
                      </div>

Title label

Use with title.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-3 flex flex-col gap-y-5">
                      <div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">25%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
                        </div>
                      </div>

<div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">50%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                        </div>
                      </div>

<div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">75%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
                        </div>
                      </div>

<div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">100%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">25%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
                        </div>
                      </div>

<div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">75%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
                        </div>
                      </div>

<div>
                        <div class="mb-2 flex justify-between items-center">
                          <h3 class="text-sm font-medium text-foreground">Progress title</h3>
                          <span class="text-sm text-foreground">100%</span>
                        </div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                        </div>
                      </div>

Floating label

Label floating with the number on top of the progress bar.

Theme:

<div>
                        <div class="inline-block mb-2 ms-[calc(50%-20px)] py-0.5 px-1.5 bg-primary-50 border border-primary-200 text-xs font-medium text-primary-600 rounded-lg dark:bg-primary-500/20 dark:border-primary-900 dark:text-primary-400">50%</div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                        </div>
                      </div>

<div>
                        <div class="inline-block mb-2 ms-[calc(75%-20px)] py-0.5 px-1.5 bg-primary-50 border border-primary-200 text-xs font-medium text-primary-600 rounded-lg dark:bg-primary-500/20 dark:border-primary-900 dark:text-primary-400">75%</div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
                        </div>
                      </div>

<div>
                        <div class="inline-block mb-2 ms-[calc(100%-20px)] py-0.5 px-1.5 bg-primary-50 border border-primary-200 text-xs font-medium text-primary-600 rounded-lg dark:bg-primary-500/20 dark:border-primary-900 dark:text-primary-400">100%</div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div>
                        <div class="inline-block mb-2 ms-[calc(25%-20px)] py-0.5 px-1.5 bg-primary-50 border border-primary-200 text-xs font-medium text-primary-600 rounded-lg dark:bg-primary-500/20 dark:border-primary-900 dark:text-primary-400">25%</div>
                        <div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
                        </div>
                      </div>

Color variants

Change the appearance of individual progress bars.

Theme:

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-surface-4 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-red-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-plain text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-secondary text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-red-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-yellow-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

<div class="flex w-full h-2 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="flex flex-col justify-center rounded-full overflow-hidden bg-plain text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
                      </div>

Multiple bars

Include multiple progress bars in a progress component if you need.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-16 flex flex-col gap-y-5">
                      <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden">
                        <div class="flex flex-col justify-center overflow-hidden bg-primary-400 text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="flex flex-col justify-center overflow-hidden bg-primary-700 text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="flex flex-col justify-center overflow-hidden bg-orange-600 text-xs text-secondary-foreground text-center whitespace-nowrap" style="width: 5%" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden">
                        <div class="flex flex-col justify-center overflow-hidden bg-primary-400 text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="flex flex-col justify-center overflow-hidden bg-primary-700 text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-primary-foreground text-center whitespace-nowrap" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="flex flex-col justify-center overflow-hidden bg-orange-600 text-xs text-secondary-foreground text-center whitespace-nowrap" style="width: 5%" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>

Shape

No radius

0 border radius example.

Theme:

Straight bar

Bar with 0 radius, but rounded progress.

Theme:

Vertical progress

A base form of vertical progress.

Theme:

<div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                        <div class="rounded-full overflow-hidden bg-primary" style="height: 50%"></div>
                      </div>

<div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                        <div class="rounded-full overflow-hidden bg-primary" style="height: 75%"></div>
                      </div>

<div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                        <div class="rounded-full overflow-hidden bg-primary" style="height: 90%"></div>
                      </div>

<div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100">
                        <div class="rounded-full overflow-hidden bg-primary" style="height: 17%"></div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                        <div class="rounded-full overflow-hidden bg-primary" style="height: 25%"></div>
                      </div>

Steps

Progress bars with steps.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-4">
                      <div class="max-w-40 flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-surface-2 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-surface-2 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-foreground">50%</span>
                          </div>
                        </div>
                      </div>

<div class="flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-surface-2 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-surface-2 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-foreground">50%</span>
                          </div>
                        </div>
                      </div>

<div class="mt-5 max-w-40 flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-600 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-100 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-100 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-100 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-red-500">25%</span>
                          </div>
                        </div>
                      </div>

<div class="w-full flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-600 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-100 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-100 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-100 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-red-500">25%</span>
                          </div>
                        </div>
                      </div>

<div class="mt-5 max-w-40 flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-foreground">100%</span>
                          </div>
                        </div>
                      </div>

<div class="flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-foreground">100%</span>
                          </div>
                        </div>
                      </div>

<div class="mt-5 max-w-34 flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="ms-1">
                          <span class="shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-teal-500 text-foreground-inverse">
                            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                          </span>
                        </div>
                      </div>

<div class="mt-2 flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="ms-1">
                          <span class="shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-teal-500 text-foreground-inverse">
                            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                          </span>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="max-w-40 flex items-center gap-x-1">
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-surface-2 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-surface-2 text-xs text-foreground-inverse text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        <div>
                          <div class="w-10 text-end">
                            <span class="text-sm text-foreground">50%</span>
                          </div>
                        </div>
                      </div>

Circular progress

Set progress with stroke-dashoffset values between 0 to 100, lower values show higher progress (e.g., stroke-dashoffset="65" displays 35%). Fills counter-clockwise and requires manually update percentage text.

Theme:

<div class="relative size-40">
                        <svg class="size-full -rotate-90" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-foreground/10" stroke-width="2"></circle>
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="65" stroke-linecap="round"></circle>
                        </svg>
  
                        
                        <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                          <span class="text-center text-2xl font-bold text-primary">35%</span>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

Gauge progress

To adjust the percentage, change the first number in the progress circle's stroke-dasharray where it's max value 75 for gauge and 50 for half circle gauge. For example, for 50% progress, use stroke-dasharray="37.5 100" (50% of 75 is 37.5).

Theme:

<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary" stroke-width="1.5" stroke-dasharray="37.5 100" stroke-linecap="round"></circle>
                        </svg>

<div class="absolute top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
                          <span class="text-4xl font-bold text-primary">50</span>
                          <span class="text-primary block">Score</span>
                        </div>
                      </div>

<div class="relative size-40">
                        <svg class="size-full rotate-180" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-foreground/10" stroke-width="1" stroke-dasharray="50 100" stroke-linecap="round"></circle>

<div class="absolute top-9 start-1/2 transform -translate-x-1/2 text-center">
                          <span class="text-3xl font-bold text-primary">75</span>
                          <span class="text-sm text-primary block">Score</span>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="relative size-40">
                        <svg class="rotate-[135deg] size-full" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-foreground/10" stroke-width="1.5" stroke-dasharray="75 100" stroke-linecap="round"></circle>

Customize visual look by adjusting stroke-width and color, text values. You may also adjust the stroke-linecap to change the shape of the gauge.

Theme:

<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-purple-600 dark:text-purple-500" stroke-width="2" stroke-dasharray="18.75 100"></circle>
                        </svg>

<div class="absolute top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
                          <span class="text-4xl font-bold text-purple-600 dark:text-purple-500">25</span>
                          <span class="text-purple-600 dark:text-purple-500 block">mph</span>
                        </div>
                      </div>

<div class="relative size-40">
                        <svg class="rotate-[135deg] size-full" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-green-200 dark:text-green-700" stroke-width="1" stroke-dasharray="75 100" stroke-linecap="round"></circle>

<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-green-500 dark:text-green-500" stroke-width="2" stroke-dasharray="56.25 100" stroke-linecap="round"></circle>
                        </svg>

<div class="absolute top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
                          <span class="text-4xl font-bold text-green-600 dark:text-green-500">75</span>
                          <span class="text-green-600 dark:text-green-500 block">Score</span>
                        </div>
                      </div>

<div class="relative size-40">
                        <svg class="size-full rotate-180" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-orange-100 dark:text-orange-700" stroke-width="3" stroke-dasharray="50 100" stroke-linecap="round"></circle>

<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-orange-600 dark:text-orange-500" stroke-width="1" stroke-dasharray="25 100" stroke-linecap="round"></circle>
                        </svg>

<div class="absolute top-9 start-1/2 transform -translate-x-1/2 text-center">
                          <span class="text-2xl font-bold text-orange-600 dark:text-orange-500">50</span>
                          <span class="text-xs text-orange-600 dark:text-orange-500 block">Average</span>
                        </div>
                      </div>
                      
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.0"></script>
                        </body>
                      </html>

<div class="relative size-40">
                        <svg class="rotate-[135deg] size-full" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-purple-200 dark:text-purple-700" stroke-width="1" stroke-dasharray="75 100"></circle>

<div class="relative size-40">
                        <svg class="rotate-[135deg] size-full" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-green-200 dark:text-green-700" stroke-width="1" stroke-dasharray="75 100" stroke-linecap="round"></circle>

<div class="relative size-40">
                        <svg class="size-full rotate-180" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                          
                          <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-orange-100 dark:text-orange-700" stroke-width="3" stroke-dasharray="50 100" stroke-linecap="round"></circle>

Tailwind CSS Progress

Basic usage

Example

Height

Labels

Within progress bar

Label at the end

Title label

Floating label

Color variants

Multiple bars

Shape

No radius

Straight bar

Vertical progress

Steps

Circular progress

Gauge progress

On this page