@veeyaainnovatives/progress-bar

A reusable Progress bar component for React applications.

Installation

npm install @veeyaainnovatives/progress-bar --save

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-bootstrap (^2.0.0)

Usage

import { ProgressBar } from '@veeyaainnovatives/progress-bar';

function App() {
  return (
    <ProgressBar
      progress={75}
      title="Total Progress"
      description="75% project completed"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | progress | number | 0 | Progress value (0-100) | | title | string | "Total Progress" | Title text displayed above the progress bar | | description | string | undefined | Description text displayed below the progress bar | | showPercentage | boolean | true | Whether to show the percentage value | | showDescription | boolean | true | Whether to show the description text | | cardStyle | object | {} | Custom styles for the Card component | | cardBodyStyle | object | { padding: '24px' } | Custom styles for the Card.Body | | titleStyle | object | { fontWeight: 'bold', fontSize: '18px', color: '#677a58' } | Custom styles for the title | | percentageStyle | object | { fontSize: '24px', fontWeight: 'bold', color: '#677a58' } | Custom styles for the percentage | | barContainerStyle | object | { width: '100%', height: '12px', backgroundColor: '#e9ecef', borderRadius: '10px', overflow: 'hidden' } | Custom styles for the progress bar container | | barFillStyle | object | { height: '100%', backgroundColor: '#677a58', transition: 'width 0.3s ease', borderRadius: '10px' } | Custom styles for the progress bar fill | | descriptionStyle | object | { fontSize: '14px', color: '#6c757d' } | Custom styles for the description | | cardClassName | string | "" | Additional CSS classes for the Card | | cardBodyClassName | string | "" | Additional CSS classes for the Card.Body | | titleClassName | string | "" | Additional CSS classes for the title | | percentageClassName | string | "" | Additional CSS classes for the percentage | | descriptionClassName | string | "" | Additional CSS classes for the description | | barColor | string | undefined | Custom color for the progress bar fill (overrides barFillStyle.backgroundColor) | | backgroundColor | string | undefined | Custom color for the progress bar background (overrides barContainerStyle.backgroundColor) | | titleColor | string | undefined | Custom color for the title (overrides titleStyle.color) | | percentageColor | string | undefined | Custom color for the percentage (overrides percentageStyle.color) | | descriptionColor | string | undefined | Custom color for the description (overrides descriptionStyle.color) |

Examples

Basic Usage

<ProgressBar progress={50} />

With Custom Description

<ProgressBar
  progress={75}
  title="Project Completion"
  description="75% project completed"
/>

Custom Colors

<ProgressBar
  progress={60}
  barColor="#3B82F6"
  backgroundColor="#E5E7EB"
  titleColor="#1F2937"
  percentageColor="#3B82F6"
/>

Without Percentage

<ProgressBar
  progress={80}
  showPercentage={false}
  description="80% completed"
/>

Without Description

<ProgressBar
  progress={90}
  showDescription={false}
/>

Custom Styles

<ProgressBar
  progress={65}
  cardStyle={{
    borderRadius: '8px',
    boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
  }}
  barContainerStyle={{
    height: '16px',
    backgroundColor: '#F3F4F6'
  }}
  barFillStyle={{
    backgroundColor: '#10B981',
    transition: 'width 0.5s ease'
  }}
/>

License

MIT