Aurora BPM Loader
Aurora BPM Loader is a loader in the UI HUB loaders collection. A dark cardio loader. The heartbeat ECG path fills via strokeDashoffset driven by the REAL path length (getTotalLength), so the draw is exact for every viewport.
The component is driven by 6 documented props (progress, size, label, ribbonColors, autoPlay, onComplete), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: svg path + getTotalLength; SMIL <animate>; inline styles + scoped <style>.
Preview the loader in the browser above, copy the source, and paste it into your project. Loaders components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Aurora BPM Loader?
Heartbeat trace loader with an exact dash fill, a travelling pulse dot, and swaying aurora ribbons.
Aurora BPM Loader at a glance
- Category
- Loaders
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 6
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Aurora BPM Loader works
A dark cardio loader. The heartbeat ECG path fills via strokeDashoffset driven by the REAL path length (getTotalLength), so the draw is exact for every viewport. A travelling pulse dot rides the progress point on the trace with a fading SMIL halo, and three aurora ribbons sway continuously on their own time loop (CSS alternate timing) while brightening at totality. Counts label + BPM readout.
Technical information for Aurora BPM Loader
| Category | Loaders |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| State change | flat trace, dim ribbons to trace drawn to progress with pulse dot, ribbons swaying, brighter at 100 |
| Props | 6 configurable |
| Usage example | Not published yet |
What Aurora BPM Loader requires
- svg path + getTotalLength
- SMIL <animate>
- inline styles + scoped <style>
- controlled/uncontrolled progress
Aurora BPM Loader questions
What is Aurora BPM Loader?
Heartbeat trace loader with an exact dash fill, a travelling pulse dot, and swaying aurora ribbons.
How does Aurora BPM Loader work?
A dark cardio loader. The heartbeat ECG path fills via strokeDashoffset driven by the REAL path length (getTotalLength), so the draw is exact for every viewport. A travelling pulse dot rides the progress point on the trace with a fading SMIL halo, and three aurora ribbons sway continuously on their own time loop (CSS alternate timing) while brightening at totality. Counts label + BPM readout.
Which category does Aurora BPM Loader belong to?
Aurora BPM Loader is listed under Loaders in the UI HUB catalog. Loading and preloader animations for route transitions and first paint: progress reveals, logo and wordmark loaders, geometric spinners and percentage counters. Each loader exposes timing and label props so it can represent real progress rather than decorative motion. Remember to respect reduced-motion preferences when wiring these in.
What does the progress prop do in Aurora BPM Loader?
Controlled progress 0-100. It defaults to 0.
What does the size prop do in Aurora BPM Loader?
Square footprint in px. It defaults to 240.
Is Aurora BPM Loader free to use?
Aurora BPM Loader is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Aurora BPM Loader use?
Aurora BPM Loader uses React and is styled with Tailwind CSS.
What does Aurora BPM Loader need to run?
Aurora BPM Loader needs svg path + getTotalLength, SMIL <animate>, inline styles + scoped <style> and controlled/uncontrolled progress.