Diamond Shine Loader
A faceted gem bobs in place while a band of light sweeps across its cut and a glint flashes at the corner. Facets are accent tints and shades; an SVG clipPath keeps the band on the stone.
Also known as: gem loader, diamond sparkle animation, crystal loader.
HTML
<svg class="ldr-diamond-shine" viewBox="0 0 100 100" role="status" aria-label="Loading">
<defs>
<clipPath id="ldr-diamond-shine-cut"><polygon points="28,22 72,22 90,40 50,88 10,40" /></clipPath>
</defs>
<g class="ldr-diamond-shine-gem">
<polygon class="ldr-diamond-shine-light" points="10,40 28,22 36,40" />
<polygon points="28,22 50,22 36,40" />
<polygon class="ldr-diamond-shine-light" points="50,22 64,40 36,40" />
<polygon points="50,22 72,22 64,40" />
<polygon class="ldr-diamond-shine-dark" points="72,22 90,40 64,40" />
<polygon points="10,40 36,40 50,88" />
<polygon class="ldr-diamond-shine-light" points="36,40 64,40 50,88" />
<polygon class="ldr-diamond-shine-dark" points="64,40 90,40 50,88" />
<g clip-path="url(#ldr-diamond-shine-cut)"><rect class="ldr-diamond-shine-band" x="-30" y="0" width="14" height="100" /></g>
</g>
<path class="ldr-diamond-shine-glint" d="M80 6 L82.6 14.4 L91 17 L82.6 19.6 L80 28 L77.4 19.6 L69 17 L77.4 14.4 Z" />
</svg>CSS
.ldr-diamond-shine {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
width: var(--s);
height: var(--s);
overflow: visible;
filter: drop-shadow(0 0 calc(var(--s) / 12) color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent));
}
.ldr-diamond-shine-gem {
animation: ldr-diamond-shine-bob 2.4s ease-in-out infinite;
}
.ldr-diamond-shine-gem polygon {
fill: var(--c);
stroke: color-mix(in srgb, var(--c) 40%, #fff);
stroke-width: 0.8;
stroke-linejoin: round;
}
.ldr-diamond-shine-gem .ldr-diamond-shine-light {
fill: color-mix(in srgb, var(--c) 55%, #fff);
}
.ldr-diamond-shine-gem .ldr-diamond-shine-dark {
fill: color-mix(in srgb, var(--c) 70%, #000);
}
.ldr-diamond-shine-band {
fill: color-mix(in srgb, #fff 75%, transparent);
animation: ldr-diamond-shine-sweep 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
.ldr-diamond-shine-glint {
fill: var(--c);
transform-box: fill-box;
transform-origin: 50% 50%;
animation: ldr-diamond-shine-glint 2.4s ease-out infinite;
}
@keyframes ldr-diamond-shine-bob {
0%, 100% { transform: translateY(2%); }
50% { transform: translateY(-2%); }
}
@keyframes ldr-diamond-shine-sweep {
0% { transform: skewX(-20deg) translateX(0); }
50%, 100% { transform: skewX(-20deg) translateX(160%); }
}
@keyframes ldr-diamond-shine-glint {
0%, 38% { transform: scale(0) rotate(0deg); opacity: 0; }
50% { transform: scale(1) rotate(45deg); opacity: 1; }
68%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-diamond-shine, .ldr-diamond-shine *, .ldr-diamond-shine::before, .ldr-diamond-shine::after, .ldr-diamond-shine *::before, .ldr-diamond-shine *::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.