Windmill Loader
A Dutch windmill with four latticed sails turning steadily above its tower. Each sail is a gradient lattice on one span, rotated into place with a --i variable.
Also known as: windmill spinning animation, rotating windmill css, dutch windmill loader.
HTML
<div class="ldr-windmill" role="status" aria-label="Loading">
<span class="ldr-windmill-sails">
<span style="--i: 0"></span><span style="--i: 1"></span><span style="--i: 2"></span><span style="--i: 3"></span>
</span>
</div>CSS
.ldr-windmill {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
}
.ldr-windmill::before {
content: "";
position: absolute;
left: 33%;
bottom: 2%;
width: 34%;
height: 56%;
background:
radial-gradient(circle calc(var(--s) * 0.06) at 50% 72%, color-mix(in srgb, var(--c) 35%, #fff) 92%, transparent) 50% 0 / 100% 100% no-repeat,
linear-gradient(color-mix(in srgb, var(--c) 35%, #fff) 0 0) 50% 100% / calc(var(--s) * 0.12) 28% no-repeat,
var(--c);
clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}
.ldr-windmill::after {
content: "";
position: absolute;
left: 36%;
bottom: 56%;
width: 28%;
height: 16%;
background: var(--c);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ldr-windmill-sails {
position: absolute;
z-index: 1;
left: 50%;
top: 44%;
animation: ldr-windmill-turn 3s linear infinite;
}
.ldr-windmill-sails::after {
content: "";
position: absolute;
left: calc(var(--s) * -0.06);
top: calc(var(--s) * -0.06);
width: calc(var(--s) * 0.12);
height: calc(var(--s) * 0.12);
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 0 calc(var(--s) / 40) color-mix(in srgb, var(--c) 35%, #fff);
}
.ldr-windmill-sails span {
position: absolute;
left: 0;
bottom: 0;
width: calc(var(--s) * 0.14);
height: calc(var(--s) * 0.42);
box-sizing: border-box;
border: calc(var(--s) / 36) solid var(--c);
border-left-width: calc(var(--s) / 18);
background:
repeating-linear-gradient(to bottom, var(--c) 0 calc(var(--s) / 36), transparent 0 calc(var(--s) * 0.075)),
color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
transform: rotate(calc(var(--i) * 90deg));
transform-origin: 0 100%;
}
@keyframes ldr-windmill-turn {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-windmill, .ldr-windmill *, .ldr-windmill::before, .ldr-windmill::after, .ldr-windmill *::before, .ldr-windmill *::after {
animation-duration: 3s;
}
}Tailwind CSS version
The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.
<div class="relative h-12 w-12" role="status" aria-label="Loading">
<div class="absolute bottom-[2%] left-[33%] h-[56%] w-[34%] bg-blue-500 [clip-path:polygon(24%_0,76%_0,100%_100%,0_100%)]">
<div class="absolute bottom-0 left-1/2 h-[30%] w-1.5 -translate-x-1/2 rounded-t-full bg-blue-200"></div>
</div>
<div class="absolute bottom-[56%] left-[36%] h-[16%] w-[28%] bg-blue-500 [clip-path:polygon(50%_0,100%_100%,0_100%)]"></div>
<div class="absolute left-1/2 top-[44%] animate-spin [animation-duration:3s]">
<span class="absolute bottom-0 left-0 h-5 w-[7px] origin-bottom-left border border-l-[3px] border-blue-500 bg-blue-500/20 bg-[repeating-linear-gradient(#3b82f6_0_1.5px,transparent_0_3.6px)]"></span>
<span class="absolute bottom-0 left-0 h-5 w-[7px] origin-bottom-left rotate-90 border border-l-[3px] border-blue-500 bg-blue-500/20 bg-[repeating-linear-gradient(#3b82f6_0_1.5px,transparent_0_3.6px)]"></span>
<span class="absolute bottom-0 left-0 h-5 w-[7px] origin-bottom-left rotate-180 border border-l-[3px] border-blue-500 bg-blue-500/20 bg-[repeating-linear-gradient(#3b82f6_0_1.5px,transparent_0_3.6px)]"></span>
<span class="absolute bottom-0 left-0 h-5 w-[7px] origin-bottom-left -rotate-90 border border-l-[3px] border-blue-500 bg-blue-500/20 bg-[repeating-linear-gradient(#3b82f6_0_1.5px,transparent_0_3.6px)]"></span>
<span class="absolute -left-[3px] -top-[3px] h-1.5 w-1.5 rounded-full bg-blue-500 ring-1 ring-blue-200"></span>
</div>
</div>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.