Tailwind CSS React Progress Bar

Use responsive progress component with helper examples for progress ui, progress bar, progress bar steps, colors & more.

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>  
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

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