Create Progress Bar Component using React and Tailwind CSS

A progress bar is a visual representation of progress in a process. It is commonly used in web applications to indicate the completion status of an operation. In this article, we will learn how to create a progress bar component in React using Tailwind CSS for styling.

Prerequisites

• JavaScript
• React
• Tailwind CSS

Approach

• Ensure you have a React project set up and Tailwind CSS installed. You can create a new React app using Create React App and add Tailwind CSS.
• Create a new component called ProgressBar. This component will accept props for the progress percentage and any additional customization you might want (like colors).
• Use Tailwind CSS classes to style the progress bar. This includes setting the background, height, and animations.

Steps to Create Progress Bar Component

Step 1: Set up the React project using the command

npx create-react-app progress-bar-app

Step 2: Navigate to the path of the directory and install Tailwind CSS using the command

cd progress-bar-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Configure the Tailwind paths in your tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 4: Add Tailwind directives to your index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

Project Structure:

Updated Dependencies:

{
  "name": "progress-bar-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Below is a code example demonstrating the progress bar component, which updates its value based on user interaction. This component uses Tailwind CSS for styling.

// src/App.js
import React, { useState } from "react";

const App = () => {
    const [progress, setProgress] = useState(0);

    const increaseProgress = () => {
        setProgress((prev) => Math.min(prev + 10, 100));
        // Increase progress by 10%
    };

    return (
        <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
            <h1 className="text-2xl font-bold mb-4">Progress Bar</h1>
            <div className="relative w-full max-w-md h-6 bg-gray-300
            rounded-full overflow-hidden">
                <div
                    className="absolute h-full bg-blue-600 transition-all duration-300"
                    style={{ width: `${progress}%` }}
                ></div>
            </div>
            <p className="mt-2 text-lg font-semibold">{progress}%</p>
            <button
                onClick={increaseProgress}
                className="mt-4 bg-blue-500 text-white py-2 px-4 rounded-lg 
                hover:bg-blue-600 transition-colors"
            >
                Increase Progress
            </button>
        </div>
    );
};

export default App;

To start the Application, run the following command:

npm start

Output: