# 30 - Progress Bar for Loading or Task Completion

### **Description**

Create a progress bar component that displays the progress of a task or loading process, with the following features:

* *Progress Indication*: Displays the progress as a percentage or through a visual filling animation.
* *Customizability*: Allows for customization of colors, width, height, and labels.
* *Determinate vs. Indeterminate*: Supports both determinate progress (known percentage) and indeterminate progress (unknown completion time).

### **Algorithm**

1. Create a React component for the progress bar.
2. Define the props for customizing the progress bar (colors, width, height, labels, determinate/indeterminate).
3. Use CSS to style the progress bar and its components.
4. Add JavaScript code to update the progress bar based on the props.

### Classes

* `ProgressBar`: The main progress bar component.
* `ProgressBarContainer`: The container element for the progress bar.
* `ProgressBarFill`: The filling element that represents the progress.
* `ProgressBarLabel`: The label element that displays the progress percentage or text.

### **Code**

ProgressBar.js

```javascript
import React from 'react';
import './ProgressBar.css';
import ProgressBarContainer from './ProgressBarContainer';
import ProgressBarFill from './ProgressBarFill';
import ProgressBarLabel from './ProgressBarLabel';

const ProgressBar = ({
  progress,
  determinate,
  color,
  width,
  height,
  label
}) => {
  const [fillWidth, setFillWidth] = React.useState(0);

  React.useEffect(() => {
    if (determinate) {
      setFillWidth((progress / 100) * width);
    }
  }, [progress, determinate, width]);

  return (
    <ProgressBarContainer
      style={{
        width,
        height,
        backgroundColor: color
      }}
    >
      <ProgressBarFill
        style={{
          width: fillWidth,
          backgroundColor: color
        }}
      />
      <ProgressBarLabel>
        {label} {determinate ? `${progress}%` : ''}
      </ProgressBarLabel>
    </ProgressBarContainer>
  );
};

export default ProgressBar;

```

ProgressBarContainer.js

```javascript
import React from 'react';

const ProgressBarContainer = ({ children, style }) => {
  return <div className="progress-bar-container" style={style}>{children}</div>;
};

export default ProgressBarContainer;
```

ProgressBarFill.js

```javascript
import React from 'react';

const ProgressBarFill = ({ style }) => {
  return <div className="progress-bar-fill" style={style} />;
};

export default ProgressBarFill;
```

ProgressBarLabel.js

```javascript
import React from 'react';

const ProgressBarLabel = ({ children }) => {
  return <div className="progress-bar-label">{children}</div>;
};

export default ProgressBarLabel;
```

ProgressBar.css

```css
.progress-bar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  padding: 0 10px;
}

.progress-bar-fill {
  height: 100%;
  background-color: #007bff;
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
}

.progress-bar-label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
}

/* Additional styles for different states */
.progress-bar-container.determinate {
  background-color: #f0f0f0;
}

.progress-bar-container.indeterminate {
  background-color: #f0f0f0;
  animation: progress-bar-indeterminate 2s linear infinite;
}

@keyframes progress-bar-indeterminate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Media queries for responsive design */
@media (max-width: 768px) {
  .progress-bar-container {
    height: 15px;
  }
  .progress-bar-fill {
    height: 100%;
  }
  .progress-bar-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .progress-bar-container {
    height: 10px;
  }
  .progress-bar-fill {
    height: 100%;
  }
  .progress-bar-label {
    font-size: 10px;
  }
}
```

### **Explanation**

The code creates a progress bar component that displays the progress of a task or loading process. The component takes in several props for customizing the appearance and behavior of the progress bar. The `ProgressBar` component uses the `useState` hook to update the filling width based on the progress percentage. The `useEffect` hook is used to update the filling width when the progress changes. The component uses CSS to style the progress bar and its components.

### Possible Future Enhancements

* Add animation effects to the progress bar filling.
* Support multiple colors and gradients for the progress bar.
* Add a loading animation for indeterminate progress.
* Use a library like React-Spring for animation effects.