Syncfusion React Progress Bar

syncfusion/react-ui-components-skills/skills/syncfusion-react-progress-bar

作者 syncfusion6fb1c883a8412b611b95f839e0cb06e1fc8170a8無授權條款收錄於 2026年10月9日更新於 2026年10月9日

Implement Syncfusion React Progress Bar for visual feedback. Use this skill whenever users need to display progress indicators, loading states, file uploads, data processing, or task completion in React applications. Trigger when user mentions progress bars, loading spinners, progress indicators, determinate/indeterminate states, circular/linear progress, or any progress visualization scenario.

僅含說明Software Development

AI 產生的概覽

指導在 React 中實作 Syncfusion React Progress Bar 元件，用於進度、載入與緩衝指示。

功能: 此技能提供在 React 應用程式中使用 Syncfusion React Progress Bar 元件的說明與參考資料。內容涵蓋線性、圓形與半圓形外觀，確定、不確定與緩衝狀態，以及動畫、樣式、事件與無障礙支援，並附有檔案上傳、資料處理等常見情境的程式碼範例。產出的是實作指引與範例元件程式碼，而非檔案或指令碼。
適用情境: 適用於建構需要進度指示、載入動畫、上傳或下載進度、緩衝顯示或任務完成回饋的 React 介面。也適合自訂進度列外觀、動畫、事件或無障礙行為時使用。
執行需求: 需要 React 專案以及 @syncfusion/ej2-react-progressbar 套件，並匯入其 CSS 與佈景主題。此技能不含指令碼，僅由 SKILL.md 與參考 Markdown 檔案組成。

Implementing React Progress Bar Component

A comprehensive skill for implementing the Syncfusion React Progress Bar component for visual progress feedback, loading states, and task completion indicators.

When to Use This Skill

Use this skill when you need to:

Display progress of file uploads or downloads
Show task completion percentage
Indicate loading states (determinate or indeterminate)
Visualize data processing or long-running operations
Create progress spinners or circular indicators
Handle secondary progress (buffer scenarios)
Customize progress bar appearance and colors
Implement animations and transitions
Handle progress events and callbacks
Ensure accessibility compliance for progress indicators

Component Overview

The Syncfusion React Progress Bar is a lightweight component that visualizes task progress in linear, circular, or semi-circular shapes. It supports multiple states (determinate, indeterminate, buffer) and features animations, customization, and full accessibility support.

Key Features:

Multiple Types: Linear, Circular, Semi-Circular shapes
States: Determinate (known progress), Indeterminate (unknown), Buffer (secondary progress)
Animations: Smooth transitions with configurable duration and delay
Customization: Colors, heights, labels, themes
Events: Progress tracking, start/complete callbacks
Accessibility: WCAG 2.1 compliant with ARIA support
RTL Support: Right-to-left language support

Documentation Guide

Getting Started

📄 Read: references/getting-started.md [blocked]

Installation and package setup
Basic progress bar implementation
CSS imports and themes
First component example
TypeScript vs JavaScript

Types and Shapes

📄 Read: references/types-and-shapes.md [blocked]

Linear progress bar
Circular progress bar
Semi-circular progress bar
Shape variations and code examples
Choosing the right type for your use case

States and Modes

📄 Read: references/states-and-modes.md [blocked]

Determinate state (known progress, default)
Indeterminate state (unknown progress, spinners)
Buffer/Secondary progress (dual progress indicators)
Combining multiple states
Real-world scenarios for each state

Customization and Styling

📄 Read: references/customization-and-styling.md [blocked]

Sizing (height, width configurations)
Colors and fill customization
Labels and text display
Theme application
CSS customization
Responsive design patterns

Animations, Events, and Accessibility

📄 Read: references/animations-events-accessibility.md [blocked]

Animation configuration and control
Event handlers for progress tracking
Using callbacks for task completion
WCAG compliance
ARIA attributes and labels
Tooltip and annotation support
Troubleshooting common issues

API Reference

📄 Read: references/api.md [blocked]

Full list of public properties, methods and events for ProgressBarComponent (see file).

Quick Start Example

tsx

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
function App() {  return (    <div>      {/* Linear Determinate Progress Bar */}      <ProgressBarComponent        id="linear"        type="Linear"        height="60"        value={75}        animation={{          enable: true,          duration: 2000,          delay: 0        }}      />
      {/* Circular Progress Bar */}      <ProgressBarComponent        id="circular"        type="Circular"        height="160px"        value={60}      />
      {/* Indeterminate Loading Spinner */}      <ProgressBarComponent        id="indeterminate"        type="Linear"        height="60"        isIndeterminate={true}        animation={{          enable: true,          duration: 2000,          delay: 0        }}      />    </div>  );}
export default App;

import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
function App() {  return (    <div>      {/* Linear Determinate Progress Bar */}      <ProgressBarComponent        id="linear"        type="Linear"        height="60"        value={75}        animation={{          enable: true,          duration: 2000,          delay: 0        }}      />
      {/* Circular Progress Bar */}      <ProgressBarComponent        id="circular"        type="Circular"        height="160px"        value={60}      />
      {/* Indeterminate Loading Spinner */}      <ProgressBarComponent        id="indeterminate"        type="Linear"        height="60"        isIndeterminate={true}        animation={{          enable: true,          duration: 2000,          delay: 0        }}      />    </div>  );}
export default App;

Common Patterns

1. File Upload Progress

tsx

<ProgressBarComponent  id="upload"  type="Linear"  value={uploadPercentage}  showProgressValue={true}  progressValueFormat="N0 '%'"/>

<ProgressBarComponent  id="upload"  type="Linear"  value={uploadPercentage}  showProgressValue={true}  progressValueFormat="N0 '%'"/>

2. Loading Spinner

3. Buffer Progress (Buffered Loading)

tsx

<ProgressBarComponent  id="buffer"  type="Linear"  value={40}  secondaryProgress={80}  height="60"/>

<ProgressBarComponent  id="buffer"  type="Linear"  value={40}  secondaryProgress={80}  height="60"/>

4. Determinate Task Progress

tsx

<ProgressBarComponent  id="task"  type="Linear"  value={taskCompletionPercentage}  showProgressValue={true}  animation={{    enable: true,    duration: 1500  }}/>

<ProgressBarComponent  id="task"  type="Linear"  value={taskCompletionPercentage}  showProgressValue={true}  animation={{    enable: true,    duration: 1500  }}/>

Key Props Reference

Core Properties

Prop	Type	Default	Purpose
`id`	string	-	Unique identifier for component
`type`	"Linear" \| "Circular" \| "Semicircle"	"Linear"	Shape of progress bar
`value`	number	0	Current progress value (0-100)
`secondaryProgress`	number	0	Secondary/buffer progress value
`isIndeterminate`	boolean	false	Indeterminate/loading mode
`height`	string	"100%"	Height of progress bar (CSS value)
`width`	string	"100%"	Width of progress bar (CSS value)
`showProgressValue`	boolean	false	Display percentage text

Animation & Styling

Prop	Type	Default	Purpose
`animation`	AnimationModel	-	Animation config: `{ enable, duration, delay }`
`progressColor`	string	-	Color for progress fill (CSS color)
`trackColor`	string	-	Color for track background
`progressThickness`	number	4	Progress bar thickness (pixels)
`trackThickness`	number	4	Track thickness (pixels)
`isStriped`	boolean	false	Striped pattern appearance
`isGradient`	boolean	false	Gradient fill effect
`cssClass`	string	-	Custom CSS class for styling

Advanced Features

Prop	Type	Default	Purpose
`cornerRadius`	"Round" \| "Auto"	"Auto"	Corner style for ends
`enableRtl`	boolean	false	Right-to-left layout
`enablePieProgress`	boolean	false	Pie view for circular type
`enableProgressSegments`	boolean	false	Segmented progress rendering
`segmentCount`	number	1	Number of segments
`rangeColors`	RangeColorModel[]	-	Colors for different ranges
`minimum`	number	0	Minimum progress value
`maximum`	number	100	Maximum progress value

Label & Format

When to use each:

type: Choose based on space: Linear (full-width), Circular/Semicircle (compact)
value: Update via state to reflect real progress
isIndeterminate: Use for unknown duration tasks (loading, processing)
secondaryProgress: Show buffer/estimated vs. actual progress
animation: Enhance UX with smooth transitions (disable for real-time high-frequency updates)
cornerRadius: "Round" for modern look, "Auto" for default
segmentCount: Split progress into visual segments (e.g., 10 segments = 10% per segment)

Common Use Cases with Code Examples

Use Case 1: File Upload/Download

tsx

const [uploadProgress, setUploadProgress] = useState(0);
<ProgressBarComponent  type="Linear"  value={uploadProgress}  showProgressValue={true}  progressValueFormat="N0 '%'"  height="30"  animation={{ enable: true, duration: 500 }}/>

const [uploadProgress, setUploadProgress] = useState(0);
<ProgressBarComponent  type="Linear"  value={uploadProgress}  showProgressValue={true}  progressValueFormat="N0 '%'"  height="30"  animation={{ enable: true, duration: 500 }}/>

Best Practices:

Use Linear type for wide displays
Update value from upload progress events
Show estimated time in addition to percentage
Optional secondaryProgress for pre-fetched bytes

Use Case 2: Loading State (Unknown Duration)

tsx

<ProgressBarComponent  type="Circular"  isIndeterminate={true}  height="100px"  animation={{ enable: true, duration: 2000 }}/>

<ProgressBarComponent  type="Circular"  isIndeterminate={true}  height="100px"  animation={{ enable: true, duration: 2000 }}/>

Best Practices:

Use Circular for compact display
Keep isIndeterminate={true} until operation completes
Spinner continues animating indefinitely
Replace with determinate once progress can be tracked

Use Case 3: Data Processing

tsx

const [processProgress, setProcessProgress] = useState(0);const totalItems = 100;
useEffect(() => {  processItems().then(processed => {    setProcessProgress((processed / totalItems) * 100);  });}, []);
<ProgressBarComponent  type="Linear"  value={processProgress}  showProgressValue={true}  height="30"/>

const [processProgress, setProcessProgress] = useState(0);const totalItems = 100;
useEffect(() => {  processItems().then(processed => {    setProcessProgress((processed / totalItems) * 100);  });}, []);
<ProgressBarComponent  type="Linear"  value={processProgress}  showProgressValue={true}  height="30"/>

Best Practices:

Update value as items are processed
Show item count: "25 of 100 items"
Show elapsed time and estimated remaining
Display success/error message on completion

Use Case 4: Multiple Tasks (Buffering/Streaming)

tsx

const [processedItems, setProcessedItems] = useState(30);const [queuedItems, setQueuedItems] = useState(75);const totalItems = 100;
<ProgressBarComponent  type="Linear"  value={(processedItems / totalItems) * 100}  secondaryProgress={(queuedItems / totalItems) * 100}  height="30"/>

const [processedItems, setProcessedItems] = useState(30);const [queuedItems, setQueuedItems] = useState(75);const totalItems = 100;
<ProgressBarComponent  type="Linear"  value={(processedItems / totalItems) * 100}  secondaryProgress={(queuedItems / totalItems) * 100}  height="30"/>

Best Practices:

Primary progress (value) = actual processed
Secondary progress = queued/buffered items
Great for streaming/video buffering scenarios
Also works for task queue management

Use Case 5: Multi-Step Workflow

tsx

const steps = ['Validation', 'Processing', 'Upload', 'Confirmation'];const [currentStep, setCurrentStep] = useState(0);const progress = ((currentStep + 1) / steps.length) * 100;
<ProgressBarComponent  type="Linear"  value={progress}  showProgressValue={true}  height="30"/>
<div>  {steps.map((step, i) => (    <div key={i}>      {step} {i === currentStep ? '🔄' : i < currentStep ? '✓' : '⏳'}    </div>  ))}</div>

const steps = ['Validation', 'Processing', 'Upload', 'Confirmation'];const [currentStep, setCurrentStep] = useState(0);const progress = ((currentStep + 1) / steps.length) * 100;
<ProgressBarComponent  type="Linear"  value={progress}  showProgressValue={true}  height="30"/>
<div>  {steps.map((step, i) => (    <div key={i}>      {step} {i === currentStep ? '🔄' : i < currentStep ? '✓' : '⏳'}    </div>  ))}</div>

Best Practices:

Calculate progress as (currentStep / totalSteps) * 100
Show step indicators alongside progress bar
Highlight current step
Disable user interactions during processing

Advanced Usage Patterns

1. Value Binding with State Management

tsx

import { useState, useEffect } from 'react';import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
function ProgressManager() {  const [progress, setProgress] = useState(0);  const [isProcessing, setIsProcessing] = useState(false);
  useEffect(() => {    if (!isProcessing) return;
    const interval = setInterval(() => {      setProgress(prev => {        if (prev >= 100) {          setIsProcessing(false);          return 100;        }        return prev + Math.random() * 15;      });    }, 500);
    return () => clearInterval(interval);  }, [isProcessing]);
  return (    <div>      <ProgressBarComponent         type="Linear"        value={progress}        showProgressValue={true}      />      <button         onClick={() => { setProgress(0); setIsProcessing(true); }}        disabled={isProcessing}      >        {isProcessing ? 'Processing...' : 'Start'}      </button>    </div>  );}
export default ProgressManager;

import { useState, useEffect } from 'react';import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar';
function ProgressManager() {  const [progress, setProgress] = useState(0);  const [isProcessing, setIsProcessing] = useState(false);
  useEffect(() => {    if (!isProcessing) return;
    const interval = setInterval(() => {      setProgress(prev => {        if (prev >= 100) {          setIsProcessing(false);          return 100;        }        return prev + Math.random() * 15;      });    }, 500);
    return () => clearInterval(interval);  }, [isProcessing]);
  return (    <div>      <ProgressBarComponent         type="Linear"        value={progress}        showProgressValue={true}      />      <button         onClick={() => { setProgress(0); setIsProcessing(true); }}        disabled={isProcessing}      >        {isProcessing ? 'Processing...' : 'Start'}      </button>    </div>  );}
export default ProgressManager;

2. Animation Configuration Patterns

tsx

// Real-time updates (no animation for smoothness)animation={{ enable: false }}
// User interactions (quick feedback)animation={{ enable: true, duration: 300, delay: 0 }}
// Page loads (smooth transition)animation={{ enable: true, duration: 1500, delay: 0 }}
// Cascading effects (staggered)animation={{ enable: true, duration: 1000, delay: 200 }}
// Loading spinners (continuous)animation={{ enable: true, duration: 2000 }}

// Real-time updates (no animation for smoothness)animation={{ enable: false }}
// User interactions (quick feedback)animation={{ enable: true, duration: 300, delay: 0 }}
// Page loads (smooth transition)animation={{ enable: true, duration: 1500, delay: 0 }}
// Cascading effects (staggered)animation={{ enable: true, duration: 1000, delay: 200 }}
// Loading spinners (continuous)animation={{ enable: true, duration: 2000 }}

3. Conditional Rendering Based on State

tsx

function ConditionalProgress() {  const [state, setState] = useState('idle'); // idle | loading | success | error  const [value, setValue] = useState(0);
  const getProgressType = () => {    if (state === 'loading') return 'Circular';    return 'Linear';  };
  return (    <>      {state === 'loading' && (        <ProgressBarComponent          type={getProgressType()}          isIndeterminate={state === 'loading'}          height="100px"        />      )}
      {state === 'success' && (        <div style={{ color: 'green' }}>✓ Complete</div>      )}
      {state === 'error' && (        <div style={{ color: 'red' }}>✗ Error occurred</div>      )}    </>  );}
export default ConditionalProgress;

function ConditionalProgress() {  const [state, setState] = useState('idle'); // idle | loading | success | error  const [value, setValue] = useState(0);
  const getProgressType = () => {    if (state === 'loading') return 'Circular';    return 'Linear';  };
  return (    <>      {state === 'loading' && (        <ProgressBarComponent          type={getProgressType()}          isIndeterminate={state === 'loading'}          height="100px"        />      )}
      {state === 'success' && (        <div style={{ color: 'green' }}>✓ Complete</div>      )}
      {state === 'error' && (        <div style={{ color: 'red' }}>✗ Error occurred</div>      )}    </>  );}
export default ConditionalProgress;

4. Event Handling for Tracking

tsx

function ProgressWithEvents() {  const handleStart = () => {    console.log('Progress started');    analytics.track('progress_started');  };
  const handleComplete = () => {    console.log('Progress completed');    analytics.track('progress_completed');    showNotification('Task completed!');  };
  const handleValueChange = (args) => {    console.log(`Progress: ${args.value}%`);    // Milestone tracking    if (args.value === 50) {      analytics.track('progress_midpoint');    }  };
  return (    <ProgressBarComponent      type="Linear"      value={75}      progressStart={handleStart}      progressComplete={handleComplete}      valueChanged={handleValueChange}    />  );}
export default ProgressWithEvents;

function ProgressWithEvents() {  const handleStart = () => {    console.log('Progress started');    analytics.track('progress_started');  };
  const handleComplete = () => {    console.log('Progress completed');    analytics.track('progress_completed');    showNotification('Task completed!');  };
  const handleValueChange = (args) => {    console.log(`Progress: ${args.value}%`);    // Milestone tracking    if (args.value === 50) {      analytics.track('progress_midpoint');    }  };
  return (    <ProgressBarComponent      type="Linear"      value={75}      progressStart={handleStart}      progressComplete={handleComplete}      valueChanged={handleValueChange}    />  );}
export default ProgressWithEvents;

5. Responsive Design

tsx

function ResponsiveProgress() {  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  useEffect(() => {    const handleResize = () => setIsMobile(window.innerWidth < 768);    window.addEventListener('resize', handleResize);    return () => window.removeEventListener('resize', handleResize);  }, []);
  return (    <ProgressBarComponent      type={isMobile ? 'Semicircle' : 'Linear'}      value={65}      height={isMobile ? '100px' : '40'}      showProgressValue={true}    />  );}
export default ResponsiveProgress;

function ResponsiveProgress() {  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  useEffect(() => {    const handleResize = () => setIsMobile(window.innerWidth < 768);    window.addEventListener('resize', handleResize);    return () => window.removeEventListener('resize', handleResize);  }, []);
  return (    <ProgressBarComponent      type={isMobile ? 'Semicircle' : 'Linear'}      value={65}      height={isMobile ? '100px' : '40'}      showProgressValue={true}    />  );}
export default ResponsiveProgress;

6. Error Handling & Retry Logic

tsx

async function uploadWithRetry(file, maxRetries = 3) {  const [attempts, setAttempts] = useState(0);  const [progress, setProgress] = useState(0);  const [error, setError] = useState(null);
  for (let i = 0; i < maxRetries; i++) {    try {      setAttempts(i + 1);      const result = await uploadFile(file, (p) => setProgress(p));      return result;    } catch (err) {      if (i === maxRetries - 1) {        setError(`Failed after ${maxRetries} attempts`);        throw err;      }      // Retry with exponential backoff      await new Promise(r => setTimeout(r, Math.pow(2, i) * 1000));    }  }}

async function uploadWithRetry(file, maxRetries = 3) {  const [attempts, setAttempts] = useState(0);  const [progress, setProgress] = useState(0);  const [error, setError] = useState(null);
  for (let i = 0; i < maxRetries; i++) {    try {      setAttempts(i + 1);      const result = await uploadFile(file, (p) => setProgress(p));      return result;    } catch (err) {      if (i === maxRetries - 1) {        setError(`Failed after ${maxRetries} attempts`);        throw err;      }      // Retry with exponential backoff      await new Promise(r => setTimeout(r, Math.pow(2, i) * 1000));    }  }}

Integration with Common Patterns

With React Query

tsx

import { useQuery } from '@tanstack/react-query';
function DataProcessing() {  const { data, isLoading, progress } = useQuery({    queryKey: ['processData'],    queryFn: async ({ signal }) => {      // Process with progress tracking    }  });
  return (    <ProgressBarComponent      isIndeterminate={isLoading}      value={progress || 0}    />  );}

import { useQuery } from '@tanstack/react-query';
function DataProcessing() {  const { data, isLoading, progress } = useQuery({    queryKey: ['processData'],    queryFn: async ({ signal }) => {      // Process with progress tracking    }  });
  return (    <ProgressBarComponent      isIndeterminate={isLoading}      value={progress || 0}    />  );}

With Redux

tsx

import { useSelector, useDispatch } from 'react-redux';
function ReduxProgress() {  const { progress, isLoading } = useSelector(state => state.upload);  const dispatch = useDispatch();
  return (    <ProgressBarComponent      value={progress}      isIndeterminate={isLoading}      progressComplete={() => dispatch(resetProgress())}    />  );}

import { useSelector, useDispatch } from 'react-redux';
function ReduxProgress() {  const { progress, isLoading } = useSelector(state => state.upload);  const dispatch = useDispatch();
  return (    <ProgressBarComponent      value={progress}      isIndeterminate={isLoading}      progressComplete={() => dispatch(resetProgress())}    />  );}

來源與署名

來源：syncfusion/react-ui-components-skills位於skills/syncfusion-react-progress-bar提交6fb1c88

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Syncfusion React Progress Bar

Implementing React Progress Bar Component

When to Use This Skill

Component Overview

Documentation Guide

Getting Started

Types and Shapes

States and Modes

Customization and Styling

Animations, Events, and Accessibility

API Reference

Quick Start Example

Common Patterns

1. File Upload Progress

2. Loading Spinner

3. Buffer Progress (Buffered Loading)

4. Determinate Task Progress

Key Props Reference

Core Properties

Animation & Styling

Advanced Features

Label & Format

Common Use Cases with Code Examples

Use Case 1: File Upload/Download

Use Case 2: Loading State (Unknown Duration)

Use Case 3: Data Processing

Use Case 4: Multiple Tasks (Buffering/Streaming)

Use Case 5: Multi-Step Workflow

Advanced Usage Patterns

1. Value Binding with State Management

2. Animation Configuration Patterns

3. Conditional Rendering Based on State

4. Event Handling for Tracking

5. Responsive Design

6. Error Handling & Retry Logic

Integration with Common Patterns

With React Query

With Redux

來源與署名

更多來自 syncfusion/react-ui-components-skills 的技能

Syncfusion React Treeview

Syncfusion React Treegrid

Syncfusion React Toolbar

Syncfusion React Timeline

Syncfusion React Themes

Syncfusion React Tabs

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices