Progress Bar UI

Use Case 1: Basic Progress

Basic Progress

// Use Case 1: Basic Progress
<ProgressUI
  progress={progress}
  title="Static Title"
  bgColor="#63b3ed"
  textColor="#1e3a8a"
/>
Static Title
2%
Elapsed Time: 0h 0m 3s

Use Case 2: Progress with Elapsed Time

Progress with Elapsed Time

// Use Case 2: Progress with Elapsed Time
<ProgressUI
  progress={progress}
  title="The Quantum Odyssey"
  bgColor="#ACFE36"
  textColor="#9BA088"
  showElapsedTime
  status="A tale of wonder and exploration!"
/>
Mission Impossible
2%
Elapsed Time: 0h 0m 3s
Unlock the mysteries of the universe!

Use Case 3: Custom Styled Progress (Dark Mode)

Custom Styled Progress (Dark Mode)

// Use Case 3: Custom Styled Progress (Dark Mode)
<ProgressUI
  progress={progress}
  title="Legendary Quest for Wisdom"
  bgColor="#1a202c"
  textColor="#cbd5e0"
  variant="dark"
  showElapsedTime
  status="Unlock the mysteries of the universe!"
/>
Secrets of the Lost City
2%
Elapsed Time: 0h 0m 3s
Face the cosmic challenges!

Use Case 4: Progress without Elapsed Time

Progress without Elapsed Time

// Use Case 4: Progress without Elapsed Time
<ProgressUI
  progress={progress}
  title="The Quantum Odyssey"
  bgColor="#130A33"
  textColor="#D5DE2B"
  showElapsedTime={false}
  status="A tale of wonder and exploration!"
/>
Secrets of the Lost City
2%
Challenge the limits of space and time!

Use Case 5: Custom Styled Progress without Elapsed Time (Dark Mode)

Custom Styled Progress without Elapsed Time (Dark Mode)

// Use Case 5: Custom Styled Progress without Elapsed Time (Dark Mode)
<ProgressUI
  progress={progress}
  title="Chronicles of the Nebula"
  bgColor="#1a202c"
  textColor="#cbd5e0"
  variant="dark"
  showElapsedTime={false}
  status="Embark on a magical adventure!"
/>
Mission Impossible
2%
Journey to the unknown and beyond!

Use Case 6: Basic Progress without Status

Basic Progress without Status

// Use Case 6: Basic Progress without Status
<ProgressUI
  progress={progress}
  title="Chronicles of the Nebula"
  bgColor="#D551B8"
  textColor="#B569FD"
/>
Secrets of the Lost City
2%
Elapsed Time: 0h 0m 3s

Use Case 7: Dynamic Start with Elapsed Time

Render a progress bar with elapsed time in dark mode after the user clicks on the start button.

 
          //Use Case 7 : Demonstrate Elapsed time 
          <ProgressUI
          progress={progress}
          title={getRandomTitle()}
          showElapsedTime
          status={"some message"}/>