I've updated the component to place the vertical line directly between the icons, similar to the screenshot:
Key Changes:
Continuous Vertical Line:
- Added a single continuous vertical line that runs through all steps
- Positioned the line exactly where the icons are, matching the screenshot
- Used a light gray color for the base line
Green Progress Indicator:
- Added green line segments that overlay the gray line as steps complete
- Each segment appears when the previous step is completed
- Creates a visual timeline effect similar to the screenshot
Icon Positioning:
- Added a white background to the icons so they appear to sit on top of the line
- Positioned the icons precisely to align with the vertical line
- Ensured proper z-index so icons appear above the line
Simplified Structure:
- Removed the separate top and bottom connecting lines
- Used a cleaner approach with a single continuous line
- Added proper padding to ensure consistent spacing
Maintained Other Features:
- Kept the grey spinner for processing steps
- Maintained the shimmer effect on text
- Preserved the progressive appearance of new steps
The result closely matches the screenshot's visual style, with a continuous vertical line running through the icons. As steps complete, segments of the line turn green to indicate progress, creating a clean, intuitive timeline effect.
I've removed all vertical lines from the component as requested:
Key Changes:
Removed Vertical Lines:
- Removed the continuous vertical line that ran through all steps
- Removed the green line segments that appeared when steps completed
- Eliminated all related positioning and styling for the lines
Maintained Core Functionality:
- Kept the grey spinner for processing steps
- Preserved the shimmer effect on text during processing
- Maintained the progressive appearance of new steps
- Retained the smooth animations when steps appear
Simplified Structure:
- Cleaned up the component structure without the line-related elements
- Maintained proper spacing between steps
- Kept the clean, light design aesthetic
Status Indicators:
- Maintained the green checkmark for completed steps
- Kept the grey spinner for processing steps
- Preserved the status text ("処理中" and "完了")
The component now shows a clean list of processing steps without any vertical connecting lines. Each step appears progressively as the process advances, with appropriate status indicators and animations. The shimmer effect on the text clearly shows which step is currently being processed.
