> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/30-progress-bar-for-loading-or-task-completion.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/30-progress-bar-for-loading-or-task-completion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.