feat: add CircularProgress component with live demo and tests

Author: mhnpd

docs/docs/components/circular-progress.mdx

@@ -0,0 +1,37 @@
+---
+---
+
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
+import AutoPropsTable from '../../src/components/auto-props-table'
+import { CircularProgress } from 'react-loader-spinner'
+
+# CircularProgress
+
+<LiveProvider
+  code={`
+  render(<CircularProgress
+  height="100"
+  width="100"
+  color="#4fa94d"
+  ariaLabel="circular-progress-loading"
+  wrapperStyle={{}}
+  wrapperClass="wrapper-class"
+  visible={true}
+  strokeWidth={2}
+  animationDuration={1}
+  />)
+`}
+  scope={{ CircularProgress }}
+  noInline={true}
+>
+  <LivePreview />
+  <br />
+  <LiveEditor />
+  <LiveError />
+</LiveProvider>
+
+---
+
+### Props
+
+<AutoPropsTable component="CircularProgress" exclude={["gradientType", "gradientAngle", "colors"]} />

src/index.ts

@@ -33,4 +33,5 @@ export { Discuss } from './loader/discuss'
 export { ColorRing } from './loader/color-ring'
 export { Comment } from './loader/comment'
 export { Blocks } from './loader/blocks'
+export { CircularProgress } from './loader/circular-progress'
 export { Hourglass } from './loader/hourglass'

src/loader/circular-progress.tsx

@@ -0,0 +1,75 @@
+import React, { FunctionComponent, ReactElement } from 'react'
+import { BaseProps, DEFAULT_COLOR, DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'
+import { SvgWrapper } from '../shared/svg-wrapper'
+import { SVG_NAMESPACE } from '../shared/constants'
+
+interface CircularProgressProps extends BaseProps {
+  strokeWidth?: string | number
+  secondaryColor?: string
+  animationDuration?: string | number
+}
+
+export const CircularProgress: FunctionComponent<CircularProgressProps> = ({
+  height = '100',
+  width = '100',
+  color = DEFAULT_COLOR,
+  secondaryColor,
+  ariaLabel = 'circular-progress-loading',
+  wrapperStyle = {},
+  wrapperClass,
+  visible = true,
+  strokeWidth = 2,
+  animationDuration = 1,
+}): ReactElement => (
+  <SvgWrapper
+    $visible={visible}
+    style={{ ...wrapperStyle }}
+    className={wrapperClass}
+    data-testid="circular-progress-loading"
+    aria-label={ariaLabel}
+    {...DEFAULT_WAI_ARIA_ATTRIBUTE}
+  >
+    <svg
+      height={`${height}`}
+      width={`${width}`}
+      fill="none"
+      viewBox="0 0 16 16"
+      xmlns={SVG_NAMESPACE}
+      data-testid="circular-progress-svg"
+      style={{
+        animation: `spin ${animationDuration}s linear infinite`,
+      }}
+    >
+      <title>Circular Progress</title>
+      <desc>Animated circular progress indicator</desc>
+      <style>
+        {`
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      {/* Background circle with opacity */}
+      <path
+        fill="none"
+        stroke={secondaryColor || color}
+        strokeWidth={strokeWidth}
+        d="M3.05 3.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Z"
+        opacity="0.5"
+      />
+      {/* Inner filled circle */}
+      <path
+        fill={color}
+        fillRule="evenodd"
+        d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
+        clipRule="evenodd"
+      />
+      {/* Progress arc */}
+      <path
+        fill={color}
+        d="M14 8a6 6 0 0 0-6-6V0a8 8 0 0 1 8 8h-2Z"
+      />
+    </svg>
+  </SvgWrapper>
+)

test/loader/circular-progress.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { CircularProgress } from '../../src'
+import { render, screen } from '@testing-library/react'
+
+describe('CircularProgress Loader', () => {
+  it('Should render without crashing', () => {
+    render(<CircularProgress wrapperClass="test-class" wrapperStyle={{ opacity: '1' }} />)
+    const loader = screen.getByTestId('circular-progress-loading')
+    expect(loader).toBeInTheDocument()
+    expect(loader).toHaveStyle('display: flex')
+    expect(loader).toHaveAttribute('aria-label', 'circular-progress-loading')
+    expect(loader).toHaveAttribute('aria-busy', 'true')
+    expect(loader).toHaveAttribute('role', 'progressbar')
+    expect(loader).toHaveClass('test-class')
+    expect(loader).toHaveStyle('opacity:1')
+
+    const svg = screen.getByTestId('circular-progress-svg')
+    expect(svg).toBeInTheDocument()
+    expect(svg).toHaveAttribute('height', '100')
+    expect(svg).toHaveAttribute('width', '100')
+    expect(svg).toHaveAttribute('fill', 'none')
+  })
+
+  it('Should apply props passed externally', () => {
+    render(
+      <CircularProgress
+        wrapperClass="test-class"
+        wrapperStyle={{ opacity: '1' }}
+        width="200"
+        height="200"
+        ariaLabel="test-aria-label"
+        color="red"
+        secondaryColor="blue"
+        strokeWidth="4"
+        animationDuration="2"
+        visible={false}
+      />
+    )
+    const loader = screen.getByTestId('circular-progress-loading')
+    expect(loader).toBeInTheDocument()
+    expect(loader).toHaveAttribute('aria-label', 'test-aria-label')
+    expect(loader).toHaveClass('test-class')
+    expect(loader).toHaveStyle('opacity:1')
+    expect(loader).toHaveStyle('display:none')
+
+    const svg = screen.getByTestId('circular-progress-svg')
+    expect(svg).toBeInTheDocument()
+    expect(svg).toHaveAttribute('height', '200')
+    expect(svg).toHaveAttribute('width', '200')
+    expect(svg).toHaveStyle('animation: spin 2s linear infinite')
+  })
+
+  it('Should use default color when secondaryColor is not provided', () => {
+    render(<CircularProgress color="green" />)
+    const svg = screen.getByTestId('circular-progress-svg')
+    const backgroundPath = svg.querySelector('path[opacity="0.5"]')
+    expect(backgroundPath).toHaveAttribute('stroke', 'green')
+  })
+
+  it('Should use secondaryColor when provided', () => {
+    render(<CircularProgress color="green" secondaryColor="red" />)
+    const svg = screen.getByTestId('circular-progress-svg')
+    const backgroundPath = svg.querySelector('path[opacity="0.5"]')
+    expect(backgroundPath).toHaveAttribute('stroke', 'red')
+  })
+
+  it('Should apply custom strokeWidth', () => {
+    render(<CircularProgress strokeWidth="3" />)
+    const svg = screen.getByTestId('circular-progress-svg')
+    const backgroundPath = svg.querySelector('path[opacity="0.5"]')
+    expect(backgroundPath).toHaveAttribute('stroke-width', '3')
+  })
+})