Tailwind CSS React Progress Bar

Use responsive progress component with helper examples for progress ui, progress bar, progress bar steps, colors & more. Free download, open-source license.

Basic example

The progress component is mainly used to indicate the progress of a task, usually displayed as a progress bar.

Use a progress bar element to display a percentage completion rate by using an inline style and the utility classes.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary" style={{ width: "45%" }}></div>
            </div>  
        );
      }

Help us spread the word about Tailwind Elements for React (TER)

If you enjoy the project, help it grow & find more contributors by sharing it with your peers. Every share counts, thank you!

Share via Reddit

Width

Change the width style property to your level of progress completion.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary" style={{ width: "0%" }}></div>
            </div>
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary" style={{ width: "25%" }}></div>
            </div>
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary" style={{ width: "50%" }}></div>
            </div>
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary" style={{ width: "75%" }}></div>
            </div>
            <div className="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary" style={{ width: "100%" }}></div>
            </div>  
        );
      }

Labels

Use a progress bar with the label inside the bar.

25%

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="w-full bg-neutral-200 dark:bg-neutral-600">
                <div
                className="bg-primary p-0.5 text-center text-xs font-medium leading-none text-primary-100"
                style={{ width: "25%" }}
                >
                25%
                </div>
            </div>  
        );
      }

Height

Use different sizes by with various sizing utility classes.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="mb-6 h-px w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-px bg-primary" style={{ width: "25%" }}></div>
            </div>
            <div className="mb-6 h-5 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-5 bg-primary" style={{ width: "25%" }}></div>
            </div>  
        );
      }

Colors

To apply different colors to your progress bars, just add the .bg-green-500, .bg-primary-500, .bg-yellow-500 or .bg-red-500 class.

        
            
      import React from 'react';

      export default function App() {
        return (
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-green-500" style={{ width: "25%" }}></div>
            </div>
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-primary-400" style={{ width: "50%" }}></div>
            </div>
            <div className="mb-6 h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-yellow-500" style={{ width: "75%" }}></div>
            </div>
            <div className="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
                <div className="h-1 bg-red-600" style={{ width: "100%" }}></div>
            </div>  
        );
      }

If you are looking for more advanced options, try Bootstrap Progress Bar from MDBootstrap.

Progress bar

Basic example

Width

Labels

Height

Colors