The Progress Indicator component displays a circular loading animation to indicate that content is being loaded or an operation is in progress.
Import
import { ProgressIndicator } from '@naturacosmeticos/natds-react'
Basic Usage
<ProgressIndicator ariaLabel="Loading content" />
Sizes
Progress indicators are available in four sizes:
// Standard (smallest)
<ProgressIndicator ariaLabel="Loading" size="standard" />
// Semi
<ProgressIndicator ariaLabel="Loading" size="semi" />
// Medium (default)
<ProgressIndicator ariaLabel="Loading" size="medium" />
// Large
<ProgressIndicator ariaLabel="Loading" size="large" />
With Backdrop
Display a backdrop layer behind the progress indicator to prevent user interaction:
<ProgressIndicator
ariaLabel="Loading application"
showBackdrop={true}
/>
<div style={{
alignItems: 'center',
backgroundColor: '#00000099',
display: 'flex',
height: '100vh',
justifyContent: 'center'
}}>
<ProgressIndicator
ariaLabel="Loading"
showBackdrop={true}
/>
</div>
Brand Customization
Apply brand-specific styling:
<ProgressIndicator
ariaLabel="Loading"
brand="natura"
/>
<ProgressIndicator
ariaLabel="Loading"
brand="avon"
/>
Loading States
Use with conditional rendering to show loading states:
function DataComponent() {
const [loading, setLoading] = useState(true)
const [data, setData] = useState(null)
useEffect(() => {
fetchData().then(result => {
setData(result)
setLoading(false)
})
}, [])
if (loading) {
return <ProgressIndicator ariaLabel="Loading data" />
}
return <div>{data}</div>
}
Full-Screen Loading
Create a full-screen loading overlay:
function LoadingOverlay({ isLoading }) {
if (!isLoading) return null
return (
<div style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 9999
}}>
<ProgressIndicator
ariaLabel="Loading"
showBackdrop={true}
size="large"
/>
</div>
)
}
Props
Describes the purpose of the progress indicator for screen readers. This is required for accessibility.
size
'standard' | 'semi' | 'medium' | 'large'
default:"medium"
The size of the progress indicator.
Whether to show a layer behind the progress indicator.
Brand-specific styling to apply to the progress indicator.
Optional className to be added to the ProgressIndicator.
Optional ID for testing purposes.
Accessibility
- The
ariaLabel prop is required to describe what is loading for screen reader users
- The component uses
role="progressbar" for proper semantic meaning
- When using a backdrop, ensure focus management is handled appropriately
- Read more about ARIA progressbar accessibility
Best Practices
Always provide a descriptive ariaLabel
Use appropriate size for the context (larger for full-page loading, smaller for inline)
Consider showing the progress indicator only after a brief delay to avoid flashing for fast operations
Use backdrop for full-screen loading states to prevent interaction
Don’t use for operations with determinable progress — use a determinate progress bar instead
Don’t forget the ariaLabel — it’s essential for accessibility
Implementation Details
The Progress Indicator is implemented as a circular SVG animation:
- Component source:
/packages/react/src/components/ProgressIndicator/ProgressIndicator.tsx:5
- Uses an SVG circle with animated stroke
- Supports brand-specific theming through the theme system
- Responsive sizing based on the
size prop
