ProgressBar Component

Import

import { ProgressBar } from 'rohit-ui';

Examples

Basic ProgressBar

// Basic progress bar at 50%
<ProgressBar value={50} />

ProgressBar with Label

80%

// Progress bar with label
<ProgressBar 
  value={75} 
  label="Loading..." 
/>

Indeterminate ProgressBar

// Indeterminate progress bar
<ProgressBar indeterminate />

Rohit Mode ProgressBar

// Rohit Mode progress bar
<ProgressBar 
  value={50} 
  rohitMode 
/>

Note: In Rohit Mode, the bar will wiggle, change color, and sometimes fill up or empty randomly.

Props

Name	Type	Default	Description
value	number	0	Current progress value (0-100)
showLabel	boolean	false	Show percentage label inside the bar
indeterminate	boolean	false	Show indeterminate animation
className	string	-	CSS class to apply to the progress bar
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the ProgressBar component using styled-components:

import styled from 'styled-components';
import { ProgressBar } from 'rohit-ui';

const CustomProgressBar = styled(ProgressBar)`
  .progressbar-track {
    background: var(--win98-silver);
    border: 2px solid var(--win98-navy);
    border-radius: 4px;
    height: 24px;
    overflow: hidden;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .progressbar-fill {
    background: linear-gradient(to right, var(--win98-navy), var(--win98-hot-pink));
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%
      );
      background-size: 20px 20px;
      animation: progress-animation 1s linear infinite;
    }
  }
  
  .progressbar-label {
    font-family: 'Comic Sans MS', sans-serif;
    color: var(--win98-navy);
    font-size: 1.1em;
    margin-bottom: 4px;
  }
  
  @keyframes progress-animation {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
  }
`;

function MyComponent() {
  return (
    <CustomProgressBar
      value={75}
      label="Loading..."
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the ProgressBar component will:

Wiggle or bounce randomly
Change color periodically
Sometimes fill up or empty unexpectedly
Draw unnecessary attention to itself