Pulse
A gentle scaling pulse animation that rhythmically grows and shrinks an element. Ideal for subtle loading indicators, notification badges, or drawing attention to a specific UI element.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
pulsescaleheartbeatloader
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A gentle scaling pulse animation for subtle loading or attention indicators.
CSS
css
.pulse {
width: 60px;
height: 60px;
background: #3b82f6;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="pulse"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.pulse {
width: 60px;
height: 60px;
background: #3b82f6;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="pulse"></div>
</body>
</html>