Gradient Cube Loader
Loaders · @Deri-Kurniawan
- GPU-friendly
- No JS
- Reduced-motion ready
Book 3D Loader
A pure-CSS loader with 3D, flip and SVG effects, animating only GPU-friendly properties. Created by vinodjangid07 on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 930 B gzip
Created by @vinodjangid07 on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Book 3D Loader" by vinodjangid07 on Uiverse.io · MIT License · https://uiverse.io/vinodjangid07/tall-termite-75 -->
<div class="loader">
<div class="book-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="white"
viewBox="0 0 126 75"
class="book"
>
<rect
stroke-width="5"
stroke="#e05452"
rx="7.5"
height="70"
width="121"
y="2.5"
x="2.5"
></rect>
<line
stroke-width="5"
stroke="#e05452"
y2="75"
x2="63.5"
x1="63.5"
></line>
<path
stroke-linecap="round"
stroke-width="4"
stroke="#c18949"
d="M25 20H50"
></path>
<path
stroke-linecap="round"
stroke-width="4"
stroke="#c18949"
d="M101 20H76"
></path>
<path
stroke-linecap="round"
stroke-width="4"
stroke="#c18949"
d="M16 30L50 30"
></path>
<path
stroke-linecap="round"
stroke-width="4"
stroke="#c18949"
d="M110 30L76 30"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="#ffffff74"
viewBox="0 0 65 75"
class="book-page"
>
<path
stroke-linecap="round"
stroke-width="4"
stroke="#c18949"
d="M40 20H15"
></path>
<path
stroke-linecap="round"
stroke-width="4"
stroke="#c18949"
d="M49 30L15 30"
></path>
<path
stroke-width="5"
stroke="#e05452"
d="M2.5 2.5H55C59.1421 2.5 62.5 5.85786 62.5 10V65C62.5 69.1421 59.1421 72.5 55 72.5H2.5V2.5Z"
></path>
</svg>
</div>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --speed) on .loader to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Book Flip Loader
Loaders · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Cube 3D Loader
Loaders · @jeremyssocial
- GPU-friendly
- No JS
- Reduced-motion ready
Blue Book Loader
Loaders · @Nawsome
- GPU-friendly
- No JS
- Reduced-motion ready
Cube 3D Loader by Bodyhc
Loaders · @Bodyhc
- GPU-friendly
- No JS
- Reduced-motion ready
Flip Gold Loader
Loaders · @MiniJohan
- GPU-friendly
- No JS
- Reduced-motion ready