Heartbeat Spinner

The HeartbeatSpinner component displays a loading animation with a pulsing heart effect, perfect for creating engaging and playful loading states.

Basic Usage

import { HeartbeatSpinner } from "fancy-react-ui";

function App() {
  return <HeartbeatSpinner />;
}

Live Demo:

Props

Prop Name	Type	Default	Description
size	number	40	Size in pixels
color	string	#FF4B4B	Color of the heart
speed	number	1	Animation speed in seconds
className	string	""	Additional CSS class names
style	object	{}	Additional inline styles

Examples

Basic Heartbeat Spinner

<HeartbeatSpinner size={48} color="#FF4B4B" speed={1} />

Custom Size and Color

<HeartbeatSpinner size={60} color="#ff3366" />

Custom Animation Speed

<HeartbeatSpinner speed={1.2} color="#ff6699" />

With Custom Styling

<HeartbeatSpinner
  size={50}
  color="#ff4d4d"
  className="custom-heartbeat"
  style={{ margin: "20px" }}
/>

Implementation Details

The HeartbeatSpinner consists of a heart shape that pulses using CSS animations. The heart is created using border properties and transforms.

// Internal structure
<div className="heartbeat-spinner">
  <div
    className="heart"
    style={{
      borderColor: color,
      backgroundColor: color,
    }}
  />
</div>

Common Use Cases

Highlight typical scenarios where the spinner might be used:

• Social media applications
• Dating applications
• Like/favorite animations
• Emotional feedback states
• Engagement indicators

Troubleshooting

Address potential issues developers might encounter, like:

• Heart shape rendering
• Animation smoothness
• Browser compatibility
• Performance optimization
• Mobile responsiveness

Related Components

Explore similar components within the same library or ecosystem to find the best fit for your use case:

• Pulse Spinner: A pulsing animation
• Bounce Spinner: A bouncing animation