Skip to content

Pending Review

Pending Review from User Experience (UX)

Progress Bar Component

Overview

The PWC Progress Bar is a visual indicator component in the Progress Web Components design system. It displays task completion status, loading progress, and data processing states with customizable colors and animations across React and Angular applications.

Core Capabilities

  • Progress Visualization - Clear visual representation of task completion with percentage-based progress tracking
  • Multiple Color States - Support for info, success, warning, and error color schemes for different contexts
  • Animated Variants - Both static progress display and animated loading indicators for ongoing operations
  • Flexible Sizing - Medium and large size options to fit different interface layouts and hierarchies
  • Real-time Updates - Dynamic progress updates through value property changes and state management
  • Accessibility Support - Screen reader friendly with proper ARIA attributes and semantic markup

When to use Progress Bar:

  • Display completion status for multi-step processes, forms, or data operations
  • Show loading progress for file uploads, downloads, or data processing tasks
  • Indicate system status during long-running operations or batch processes
  • Provide visual feedback for user actions that require time to complete

When not to use Progress Bar:

  • Simple loading states without specific progress information (use loading spinners instead)
  • Binary on/off states or toggles (use switches or checkboxes instead)
  • Navigation indicators where steps aren't sequential (use stepper components instead)

Basic Implementation

import React, { useState } from 'react';
import { PwcProgressBar } from "@progress-i360/pwc-react";

function MyComponent() {
  const [uploadProgress, setUploadProgress] = useState(0);

  const handleUpload = () => {
    // Simulate upload progress
    const interval = setInterval(() => {
      setUploadProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 10;
      });
    }, 200);
  };

  return (
      <div>
        <PwcProgressBar 
          color="info"
          size="m" 
          value={uploadProgress}
          variant="progress"
        />
        <button onClick={handleUpload}>Start Upload</button>
      </div>
  );
}

import { useState } from 'react';
import '@progress-i360/progress-web-components/progress-bar';

function MyComponent() {
  const [taskProgress] = useState(25);

  return (
      <div>
        <pwc-progress-bar 
          color="success"
          size="l" 
          value={taskProgress}
        />
        <p>Task {taskProgress}% complete</p>
      </div>
  );
}


// component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@progress-i360/progress-web-components/progress-bar';
import '@progress-i360/progress-web-components/button';

@Component({
  selector: 'progress-demo',
  template: `
    <pwc-progress-bar 
      [color]="progressColor"
      [value]="currentProgress">
    </pwc-progress-bar>
    <pwc-button label="Start Upload" (pwc-click)="startUpload()"></pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ProgressDemo {
  currentProgress = 0;
  progressColor = 'info';

  startUpload() {
    const interval = setInterval(() => {
      this.currentProgress += 10;
      if (this.currentProgress >= 100) {
        this.progressColor = 'success';
        clearInterval(interval);
      }
    }, 200);
  }
}
```

// Create progress bar element
const progressBar = document.createElement('pwc-progress-bar');
progressBar.value = 75;
progressBar.color = 'success';

// Update progress function
function updateProgress(newValue) {
  progressBar.value = Math.min(100, Math.max(0, newValue));
}

// Example usage and progress updates
updateProgress(90);
document.body.appendChild(progressBar);

Usage Patterns

Progress bars adapt to different progress tracking scenarios:

  • Determinate Progress - Show specific completion percentages for tasks with known duration
  • Indeterminate Loading - Use animated variant for operations without specific progress metrics
  • Multi-stage Processes - Coordinate multiple progress bars for complex workflows with parallel tasks
  • Status Indicators - Display different colors to represent various states like success, warning, or error conditions

Best Practices

Content Strategy Guidelines

  • Clear Context - Always provide accompanying text to explain what progress is being tracked
  • Accurate Values - Ensure progress values reflect actual completion status, not estimated time
  • Appropriate Colors - Use semantic colors (success for completion, warning for issues, error for failures)
  • Completion Feedback - Provide clear indication when processes reach 100% completion

Performance Optimization

  • Throttled Updates - Limit progress updates to avoid excessive re-renders during rapid changes
  • Animation Control - Use animated variant sparingly to reduce CPU usage on lower-end devices
  • Value Validation - Clamp progress values between 0-100 to prevent display issues
  • Memory Management - Clean up progress tracking intervals and event listeners properly

Integration Architecture

  • State Coordination - Sync progress values with actual task completion in your application state
  • Error Handling - Switch to error color states when operations fail or encounter issues
  • Accessibility Standards - Include proper ARIA labels and live region updates for screen readers
  • Responsive Design - Test progress bar visibility and sizing across different screen sizes

Common Use Cases

File Upload Progress

  • Display upload completion percentage with real-time progress updates
  • Switch to success color when uploads complete successfully
  • Show error states when uploads fail or are interrupted

Form Completion Tracking

  • Indicate progress through multi-step forms or wizards with step-based completion
  • Provide visual feedback for form validation and submission processes
  • Guide users through complex data entry workflows

Data Processing Operations

  • Show progress for batch operations, data imports, or report generation
  • Display different colors for various processing states and outcomes
  • Provide estimated completion times alongside visual progress indicators

Troubleshooting

Common Issues

Progress Not Updating

Problem: Progress bar value doesn't change when updating the value property
Solution:

  • Ensure value updates are within 0-100 range and component is properly re-rendering

Animation Performance Issues

Problem: Animated progress bars cause performance problems or stuttering
Solution:

  • Reduce animation frequency or switch to static progress variant for better performance

Color States Not Working

Problem: Progress bar doesn't display correct colors for different states
Solution:

  • Verify color property values match supported options (info, success, warning, error)

Sizing Problems

Problem: Progress bar doesn't display at expected size or appears too small/large
Solution:

  • Check size property configuration and container CSS that might affect dimensions

Implementation Support

For detailed implementation guidance:

  • API Documentation - Complete property specifications and styling options in Storybook
  • Interactive Examples - Live demos showing different progress scenarios and color states
  • Integration Patterns - Best practices for connecting progress bars with data operations and user workflows

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools:

🔗 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.