A versatile progress indicator component with multiple display modes and size options

Basic Usage

Radial Mode

Vertical Mode

• Base styling with Tailwind:
  Core Structure

  /* Radial Mode */
  .radial-progress {
    @apply transform -rotate-90;
  }
  
  /* Horizontal Mode */
  .horizontal-progress {
    @apply w-full bg-gray-200 rounded-lg overflow-hidden;
  }
  
  /* Vertical Mode */
  .vertical-progress {
    @apply bg-gray-200 rounded-lg overflow-hidden;
  }
  

• Progress bar colors:
  Progress Colors

  .progress-bar {
    @apply bg-primary-light-500 transition-all duration-300;
  }