Tangram Loader
The seven tangram pieces burst out of their square, each turning on its own center, then click back together. Every piece is a full-size box clipped to its polygon, so one keyframe drives them all.
Also known as: tangram puzzle animation, exploding square loader, puzzle pieces loader.
HTML
<div class="ldr-tangram" role="status" aria-label="Loading"> <span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div>
CSS
.ldr-tangram {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 0.8);
height: calc(var(--s) * 0.8);
margin: calc(var(--s) * 0.1);
}
.ldr-tangram span {
position: absolute;
inset: 0;
background: var(--c);
animation: ldr-tangram-burst 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.ldr-tangram span:nth-child(1) {
--x: 0; --y: -0.2; --r: -30deg;
clip-path: polygon(0 0, 100% 0, 50% 50%);
transform-origin: 50% 16.7%;
}
.ldr-tangram span:nth-child(2) {
--x: -0.2; --y: 0; --r: 30deg;
background: color-mix(in srgb, var(--c) 70%, #000);
clip-path: polygon(0 0, 50% 50%, 0 100%);
transform-origin: 16.7% 50%;
}
.ldr-tangram span:nth-child(3) {
--x: 0.2; --y: 0.2; --r: 45deg;
background: color-mix(in srgb, var(--c) 60%, #fff);
clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
transform-origin: 83.3% 83.3%;
}
.ldr-tangram span:nth-child(4) {
--x: 0.12; --y: 0; --r: -90deg;
background: color-mix(in srgb, var(--c) 40%, #fff);
clip-path: polygon(50% 50%, 75% 25%, 75% 75%);
transform-origin: 66.7% 50%;
}
.ldr-tangram span:nth-child(5) {
--x: 0; --y: 0.16; --r: 45deg;
background: color-mix(in srgb, var(--c) 52%, #000);
clip-path: polygon(50% 50%, 75% 75%, 50% 100%, 25% 75%);
transform-origin: 50% 75%;
}
.ldr-tangram span:nth-child(6) {
--x: -0.15; --y: 0.22; --r: -60deg;
background: color-mix(in srgb, var(--c) 80%, #fff);
clip-path: polygon(0 100%, 25% 75%, 50% 100%);
transform-origin: 25% 91.7%;
}
.ldr-tangram span:nth-child(7) {
--x: 0.24; --y: -0.08; --r: 60deg;
background: color-mix(in srgb, var(--c) 82%, #000);
clip-path: polygon(75% 25%, 100% 0, 100% 50%, 75% 75%);
transform-origin: 87.5% 37.5%;
}
@keyframes ldr-tangram-burst {
0%, 18%, 88%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.94); }
44%, 62% { transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) rotate(var(--r)) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-tangram, .ldr-tangram *, .ldr-tangram::before, .ldr-tangram::after, .ldr-tangram *::before, .ldr-tangram *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.