Three dot loading indicator in pure SVG with SMIL timing. No JavaScript, no dependency and no layout shift, inherits colour through currentColor, and carries a status role so the wait is announced to assistive technology.
Loading preview...
import LoadingDots from '@/components/ui/crash-claim-loading-dots'
export default function LoadingDotsDemo() {
return (
<div style={{ display: 'grid', gap: 20, padding: 24, fontFamily: 'system-ui' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<LoadingDots />
<span style={{ fontSize: 14, color: '#69727D' }}>Loading from Dataverse</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#0A2B48' }}>
<LoadingDots size={32} label="Loading the file" />
<span style={{ fontSize: 14 }}>Colour is inherited, so it works on any surface</span>
</div>
</div>
)
}