Book
A pure CSS book loader where stacked pages flip open sequentially using rotateY and staggered animation delays. No SVG, no JavaScript — just CSS.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerbookfliploader3dperspective
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A CSS loading animation that looks like pages of a book flipping open one after another.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes whirl-book {
0% { transform: rotateY(0deg); }
50%, 80% { transform: rotateY(-180deg); }
90%, 100% { opacity: 0; transform: rotateY(-180deg); }
}
.book {
height: 30px;
position: relative;
width: 30px;
perspective: 60px;
}
.book div {
animation: whirl-book 2s infinite;
background: #6366f1;
height: 100%;
position: absolute;
left: 50%;
transform-origin: left;
width: 100%;
}
.book div:nth-child(1) { animation-delay: 0.15s; }
.book div:nth-child(2) { animation-delay: 0.30s; }
.book div:nth-child(3) { animation-delay: 0.45s; }
.book div:nth-child(4) { animation-delay: 0.60s; }
.book div:nth-child(5) { animation-delay: 0.75s; }HTML
html
<div class="book">
<div></div><div></div><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 whirl-book {
0% { transform: rotateY(0deg); }
50%, 80% { transform: rotateY(-180deg); }
90%, 100% { opacity: 0; transform: rotateY(-180deg); }
}
.book {
height: 30px;
position: relative;
width: 30px;
perspective: 60px;
}
.book div {
animation: whirl-book 2s infinite;
background: #6366f1;
height: 100%;
position: absolute;
left: 50%;
transform-origin: left;
width: 100%;
}
.book div:nth-child(1) { animation-delay: 0.15s; }
.book div:nth-child(2) { animation-delay: 0.30s; }
.book div:nth-child(3) { animation-delay: 0.45s; }
.book div:nth-child(4) { animation-delay: 0.60s; }
.book div:nth-child(5) { animation-delay: 0.75s; }
</style>
</head>
<body>
<div class="book">
<div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>