30 - Progress Bar for Loading or Task Completion

Description

Develop a progress bar component that visually represents the progress of a task or loading process. Consider 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).

• Dynamic Updates: Updates the progress dynamically based on external data or events.

2. Puzzle Algorithm:

1. HTML Structure:

   • Create a basic structure using a container element (e.g., div) and a progress bar element (e.g., progress, div).

   • Optional: Include a label element (e.g., span) to display the progress percentage.

2. CSS Styling:

   • Style the progress bar container and progress bar itself.

   • Set initial width or height, colors, and animations (optional).

3. JavaScript Functionality:

   • Update the progress bar's width or value based on progress data.

   • Handle determinate and indeterminate states differently.

   • Implement animations for dynamic updates (optional).

Code

import React from 'react';

const ProgressBar = ({ progress, width = '100%', height = '20px', color = 'blue', label }) => {
  return (
    <div className="progress-bar-container">
      {typeof progress === 'boolean' ? (
        <progress className="progress-bar" value={progress ? 'true' : 'false'} max="100" />
      ) : (
        <progress className="progress-bar" value={progress} max="100" style={{ width, height, backgroundColor: color }} />
      )}
      {label && <span className="progress-label">{label}</span>}
    </div>
  );
};

export default ProgressBar;

Explanation

• Props: The component accepts props for:

  • progress: Number (0-100) or boolean (true for indeterminate).

  • width: Width of the progress bar (default: 100%).

  • height: Height of the progress bar (default: 20px).

  • color: Color of the progress bar (default: blue).

  • label: Optional text label to display progress.

• Conditional Rendering: The component conditionally renders a progress element for indeterminate progress or a styled div for determinate progress.

• Styling: Basic styling is applied using inline styles and a CSS class for the container (progress-bar-container).

• Label: The label is rendered below the progress bar if provided.

Additional Notes

• ARIA Attributes: Add ARIA attributes like aria-valuenow, aria-valuemin, and aria-valuemax for accessibility.

• CSS Animations: Create smoother animations using CSS transitions or keyframes.

• Performance Optimization: Consider techniques like debouncing or throttling for frequent updates.