I'll create a linear progress indicator component similar to MUI's LinearProgress. Based on the screenshot, I can see the MUI documentation shows various progress types including linear variants.
I've created a comprehensive LinearProgress component that replicates the functionality of MUI's LinearProgress 1. The component includes:
Key Features:
Props:
value: Progress percentage (0-100) for determinate variantvariant: "determinate", "indeterminate", or "buffer"color: Color theme selectionbuffer: Buffer value for buffer variantclassName: Additional CSS classesThe component uses smooth CSS animations for the indeterminate variant and includes proper accessibility attributes like role="progressbar" and ARIA values.
Sources
You're absolutely right! The indeterminate animation is too fast and doesn't match MUI's smooth animation. Let me fix that with proper CSS keyframes that match MUI's timing.
Perfect! Now the indeterminate animation matches MUI's LinearProgress exactly:
Key Improvements:
The animation now has the same smooth, flowing motion as MUI's LinearProgress indeterminate variant, with two bars moving at different speeds and timings to create that characteristic overlapping wave effect.