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.

Default progress

Use a determinate bar to show progress from 0 to 100% for a known task or process.

Height

Adjust the track height to create thinner or thicker progress bars.

<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.2.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

Inside the bar

Place the progress label inside the bar when there is enough room for readable text.

<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.2.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>

End label

Place the value or percentage label at the end of the bar.

<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.2.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>

With title

Add a title above the progress bar to describe what is being measured.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.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

Float the percentage label above the fill to keep it visible as progress changes.

<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.2.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 fill color to represent different states, statuses, or categories.

<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.2.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

Use multiple bars to compare or break down progress within a shared track.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.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

Square ends

Remove border radius for a sharp-edged progress style.

Straight bar

Keep the track square while leaving the progress fill rounded.

Vertical bar

Use a vertical bar when horizontal space is limited or the design calls for column-based meters.

<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.2.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

Break the bar into steps to show staged or milestone-based progress.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.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

Use stroke-dashoffset to control how much of the circle is filled. Lower values show more progress, and you can pair the ring with centered percentage text.

<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 inset-s-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.2.0"></script>
                            </body>
                          </html>

Gauge progress

Adjust the first value in stroke-dasharray to change how much of the gauge arc is filled. Full gauges use a 75-unit arc, while half gauges use a 50-unit arc.

<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 inset-s-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 inset-s-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.2.0"></script>
                            </body>
                          </html>

<div class="relative size-40">
                            <svg class="rotate-135 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 the gauge by adjusting stroke-width, colors, labels, and stroke-linecap for different visual styles.

<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 inset-s-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-135 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 inset-s-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 inset-s-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.2.0"></script>
                            </body>
                          </html>

<div class="relative size-40">
                            <svg class="rotate-135 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-135 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>