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

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

import React from 'react';

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

export default ProgressBarContainer;

ProgressBarFill.js

import React from 'react';

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

export default ProgressBarFill;

ProgressBarLabel.js

import React from 'react';

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

export default ProgressBarLabel;

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