Load Man
A gaming-inspired pure CSS loader featuring a chomping Pac-Man character that eats a dotted track. Animated entirely with CSS keyframes and pseudo-elements.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerpacmangamingloaderchompfun
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A Pac-Man inspired CSS loading animation with a chomping character and dotted track.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes load-man-travel {
to { background-position: -200px 0; }
}
@keyframes load-man-chomp {
0% { transform: rotate(-45deg); }
50% { transform: rotate(calc(var(--close) * 1deg)); }
100% { transform: rotate(-45deg); }
}
.load-man {
animation: load-man-travel 1.2s infinite linear;
background: repeating-linear-gradient(90deg, #6366f1, #6366f1 5%, transparent 5%, transparent 35%);
height: 10px;
position: relative;
width: 200px;
}
.load-man:after,
.load-man:before {
content: '';
position: absolute;
left: -25px;
top: 50%;
border: 25px solid #facc15;
border-radius: 100%;
margin-top: -25px;
}
.load-man:before {
--close: -90;
animation: load-man-chomp 0.35s infinite linear;
border-bottom-color: transparent;
border-left-color: transparent;
}
.load-man:after {
--close: 0;
animation: load-man-chomp 0.35s infinite linear;
border-right-color: transparent;
border-top-color: transparent;
}HTML
html
<div class="load-man"></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 load-man-travel {
to { background-position: -200px 0; }
}
@keyframes load-man-chomp {
0% { transform: rotate(-45deg); }
50% { transform: rotate(calc(var(--close) * 1deg)); }
100% { transform: rotate(-45deg); }
}
.load-man {
animation: load-man-travel 1.2s infinite linear;
background: repeating-linear-gradient(90deg, #6366f1, #6366f1 5%, transparent 5%, transparent 35%);
height: 10px;
position: relative;
width: 200px;
}
.load-man:after,
.load-man:before {
content: '';
position: absolute;
left: -25px;
top: 50%;
border: 25px solid #facc15;
border-radius: 100%;
margin-top: -25px;
}
.load-man:before {
--close: -90;
animation: load-man-chomp 0.35s infinite linear;
border-bottom-color: transparent;
border-left-color: transparent;
}
.load-man:after {
--close: 0;
animation: load-man-chomp 0.35s infinite linear;
border-right-color: transparent;
border-top-color: transparent;
}
</style>
</head>
<body>
<div class="load-man"></div>
</body>
</html>