A polished pineapple loader with a clearly separated crown that smoothly orbits the fruit while remaining upright and readable.
A standalone CSS-keyframe pineapple loading animation featuring a rounded golden fruit, diamond lattice details, and a distinct three-leaf crown with a golden gem. The crown follows a tight circular orbit and counter-rotates to maintain a readable orientation. The 3-second loop includes a reduced-motion fallback with a fully assembled centered pineapple on a transparent background.
<svg xmlns="http://www.w3.org/2000/svg" id="sva-e0889f75c9-a01-sva-01-crown-orbit-root" viewBox="0 0 128 128" role="img" aria-labelledby="sva-e0889f75c9-a01-sva-01-crown-orbit-title sva-e0889f75c9-a01-sva-01-crown-orbit-desc">
<title id="sva-e0889f75c9-a01-sva-01-crown-orbit-title">Loading — pineapple with crown orbiting the top</title>
<desc id="sva-e0889f75c9-a01-sva-01-crown-orbit-desc">A pineapple loading animation with a distinct leafy crown circling the fruit in a smooth three-second loop; reduced motion shows a fully assembled centered pineapple.</desc>
<style>
#sva-e0889f75c9-a01-sva-01-crown-orbit-root {
--sva-01-crown-orbit-duration: 3s;
--sva-01-crown-orbit-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-orbit {
transform-box: view-box;
transform-origin: 64px 44px;
animation: sva-e0889f75c9-a01-sva-01-crown-orbit-rotate var(--sva-01-crown-orbit-duration) linear infinite, sva-e0889f75c9-a01-sva-01-crown-orbit-fade var(--sva-01-crown-orbit-duration) linear infinite;
will-change: transform, opacity;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-crown {
transform-box: view-box;
transform-origin: 64px 24px;
animation: sva-e0889f75c9-a01-sva-01-crown-orbit-counter var(--sva-01-crown-orbit-duration) linear infinite;
will-change: transform;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-shadow {
transform-box: fill-box;
transform-origin: center;
animation: sva-e0889f75c9-a01-sva-01-crown-orbit-ground var(--sva-01-crown-orbit-duration) var(--sva-01-crown-orbit-ease) infinite;
will-change: transform, opacity;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-lattice {
animation: sva-e0889f75c9-a01-sva-01-crown-orbit-assemble var(--sva-01-crown-orbit-duration) var(--sva-01-crown-orbit-ease) infinite;
}
@keyframes sva-e0889f75c9-a01-sva-01-crown-orbit-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes sva-e0889f75c9-a01-sva-01-crown-orbit-counter {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes sva-e0889f75c9-a01-sva-01-crown-orbit-fade {
0%, 4%, 100% { opacity: 0; }
14%, 88% { opacity: 1; }
}
@keyframes sva-e0889f75c9-a01-sva-01-crown-orbit-ground {
0%, 100% { transform: scaleY(0.98); opacity: 0.72; }
50% { transform: scaleY(1.02); opacity: 0.9; }
}
@keyframes sva-e0889f75c9-a01-sva-01-crown-orbit-assemble {
0%, 14% { opacity: 0.28; stroke-dasharray: 0 180; stroke-dashoffset: 0; }
58%, 100% { opacity: 1; stroke-dasharray: 180 0; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a01-sva-01-crown-orbit-root * {
animation: none !important;
transition: none !important;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-orbit {
transform: none;
opacity: 1;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-crown {
transform: none;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-shadow {
transform: scaleY(1);
opacity: 0.88;
}
#sva-e0889f75c9-a01-sva-01-crown-orbit-root .sva-01-crown-orbit-lattice {
stroke-dasharray: 180 0;
opacity: 1;
}
}
</style>
<g class="sva-01-crown-orbit-motif" data-motif="Pineapple">
<g class="sva-01-crown-orbit-shadow" data-role="ground-shadow" opacity="0.85">
<ellipse cx="64" cy="106" rx="24" ry="5" fill="#163A2A"/>
</g>
<g class="sva-01-crown-orbit-body" data-role="body">
<path d="M64 31C51 31 41 41 39 55l-3 19c-2 12 2 24 10 32 5 5 11 8 18 8s13-3 18-8c8-8 12-20 10-32l-3-19c-2-14-12-24-25-24Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" data-role="fruit-silhouette"/>
<path d="M48 47l32 18M43 61l38 22M43 79l31 18M80 47L48 65M85 61L47 83M85 79L54 97" fill="none" stroke="#FFE37A" stroke-width="1.2" stroke-linecap="round" opacity="0.95" class="sva-01-crown-orbit-lattice" data-role="diamond-lattice"/>
<path d="M52 39c4 7 4 15 0 22M64 35v28M76 39c-4 7-4 15 0 22" fill="none" stroke="#FFFDF5" stroke-width="1.2" stroke-linecap="round" opacity="0.55" data-role="lattice-highlights"/>
<g class="sva-01-crown-orbit-seeds" data-role="seeds" fill="#FFFDF5">
<circle cx="56" cy="58" r="1.7"/>
<circle cx="72" cy="58" r="1.7"/>
<circle cx="50" cy="75" r="1.7"/>
<circle cx="78" cy="75" r="1.7"/>
</g>
</g>
<g class="sva-01-crown-orbit-orbit" data-role="crown-orbit">
<g class="sva-01-crown-orbit-crown" data-role="crown">
<path d="M64 27C60 21 59 15 60 9c4 3 7 8 8 14 1-8 5-14 11-18 0 8-2 15-7 22" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" data-role="left-leaf"/>
<path d="M64 27c-1-8 0-16 4-23 3 5 4 12 2 22" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" data-role="center-leaf"/>
<path d="M64 27c5-7 11-11 18-13-1 7-5 14-12 18" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" data-role="right-leaf"/>
<circle cx="64" cy="28" r="4.2" fill="#FFE37A" stroke="#163A2A" stroke-width="2" data-role="crown-gem"/>
</g>
</g>
</g>
</svg>