<div class="pc-fold" role="status" aria-label="Loading">
<i></i><i></i><i></i><i></i>
</div>About this loader
A loader of four squares that fold in one after another around a rotated grid, each a pseudo-element with a staggered delay.
How it works
A two by two grid is rotated 45 degrees. Each cell holds a pseudo-element square that folds in with a 3D rotateX, stays visible for a while, then folds out with a rotateY. The four cells are turned by different angles and given staggered delays so the folds travel around the diamond.
Ways to customise it
- Change #00d4ff to recolour the squares.
- Change the 48px size on the wrapper to scale the loader.
- Shorten the 2.4s duration for a livelier loop.
Good to know
The role=status and aria-label tell assistive tools that something is loading, but pair it with a visible Loading message where you can. Add a prefers-reduced-motion rule to show a static square if you use it on a busy page.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.