Coffee
A pure CSS coffee-cup loader with three staggered steam columns that rise and fade using CSS grid and opacity animations — no images or SVG required.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnercoffeeloadersteamcreativegrid
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A CSS loading indicator shaped like a coffee cup with three steam wisps that rise and fade in sequence.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes coffee {
100% {
opacity: 0;
transform: translateY(-200%);
}
}
.coffee {
background: #ffffff;
display: grid;
border-radius: 4px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
height: 40px;
position: relative;
width: 40px;
padding: 2px;
justify-items: center;
}
.coffee:before {
box-sizing: border-box;
content: '';
height: 26px;
width: 20px;
border: 4px solid #ffffff;
position: absolute;
top: 50%;
margin-top: -13px;
margin-left: -10px;
left: 100%;
border-radius: 4px;
}
.coffee div {
height: 20px;
width: 8px;
background: #ffffff;
opacity: .3;
animation: coffee 2s infinite;
}
.coffee div:nth-child(1) { animation-delay: 0.4s; }
.coffee div:nth-child(2) { animation-delay: 1s; }
.coffee div:nth-child(3) { animation-delay: 0.2s; }HTML
html
<div class="coffee">
<div></div>
<div></div>
<div></div>
</div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes coffee {
100% {
opacity: 0;
transform: translateY(-200%);
}
}
.coffee {
background: #ffffff;
display: grid;
border-radius: 4px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
height: 40px;
position: relative;
width: 40px;
padding: 2px;
justify-items: center;
}
.coffee:before {
box-sizing: border-box;
content: '';
height: 26px;
width: 20px;
border: 4px solid #ffffff;
position: absolute;
top: 50%;
margin-top: -13px;
margin-left: -10px;
left: 100%;
border-radius: 4px;
}
.coffee div {
height: 20px;
width: 8px;
background: #ffffff;
opacity: .3;
animation: coffee 2s infinite;
}
.coffee div:nth-child(1) { animation-delay: 0.4s; }
.coffee div:nth-child(2) { animation-delay: 1s; }
.coffee div:nth-child(3) { animation-delay: 0.2s; }
</style>
</head>
<body>
<div class="coffee">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>