Morph
A shape-morphing loader that smoothly transitions between geometric forms by animating border-radius and rotation. Use it when you want a visually interesting alternative to standard spinners.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
morphshapetransformloader
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A shape-morphing loader that transitions between geometric forms for visual interest.
CSS
css
.morph {
width: 48px; height: 48px;
background: #14b8a6;
border-radius: 10%;
animation: morph 1.5s ease-in-out infinite;
}
@keyframes morph {
0%, 100% { border-radius: 10%; transform: rotate(0deg); }
50% { border-radius: 90%; transform: rotate(180deg); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="morph"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.morph {
width: 48px; height: 48px;
background: #14b8a6;
border-radius: 10%;
animation: morph 1.5s ease-in-out infinite;
}
@keyframes morph {
0%, 100% { border-radius: 10%; transform: rotate(0deg); }
50% { border-radius: 90%; transform: rotate(180deg); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="morph"></div>
</body>
</html>