Progress Bar Line Cap Renderer

Build a React component that demonstrates different line cap styles for progress bars using various cap configurations.

Requirements

Create a React component called LineCapDemo that:

1. Renders three horizontal progress bars, each showing 60% progress
2. Each progress bar should use a different line end style:
   • First bar: rounded line ends
   • Second bar: flat/straight line ends (no extension beyond the endpoints)
   • Third bar: square line ends (extends beyond the endpoints)
3. Each progress bar should be clearly labeled with the style being demonstrated
4. Use a stroke width of 8 pixels for all progress bars
5. Use blue (#2196F3) for the progress color and light gray (#E0E0E0) for the background rail

Output

The component should render three distinct progress bars vertically stacked with labels, allowing visual comparison of the different line cap styles.

Test Cases

• Renders three progress bars with 60% completion @test
• Each progress bar uses the correct stroke width of 8 pixels @test
• The component displays labels for each line cap style @test

Implementation

@generates

API

import React from 'react';

/**
 * Component that demonstrates different line cap styles for progress bars
 */
export function LineCapDemo(): React.ReactElement;

Dependencies { .dependencies }

@rc-component/progress { .dependency }

Provides progress bar components with customizable stroke styling.

react { .dependency }

React library for building user interfaces.