A polished pineapple loader with a rotating segmented progress ring that clearly communicates loading while keeping the playful fruit motif central.
This standalone inline SVG features a pineapple silhouette surrounded by 12 equal arc segments. CSS keyframes animate opacity and scale to create a bright leading segment with a soft trailing sequence over a 3-second loop. The SVG uses only the supplied palette, has a transparent background, and includes a reduced-motion static pose with three contiguous segments illuminated.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a10-sva-10-segmented-ring-root" role="img" aria-labelledby="sva-e0889f75c9-a10-sva-10-segmented-ring-title sva-e0889f75c9-a10-sva-10-segmented-ring-desc">
<title id="sva-e0889f75c9-a10-sva-10-segmented-ring-title">Loading — pineapple with rotating segmented progress ring</title>
<desc id="sva-e0889f75c9-a10-sva-10-segmented-ring-desc">A centered pineapple remains visible while twelve surrounding ring segments cycle through bright and dim states to indicate loading.</desc>
<style>
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment {
transform-box: view-box;
transform-origin: 64px 64px;
animation: sva-e0889f75c9-a10-sva-10-segmented-ring-cycle 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(1) { animation-delay: 0s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(2) { animation-delay: -0.25s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(3) { animation-delay: -0.5s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(4) { animation-delay: -0.75s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(5) { animation-delay: -1s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(6) { animation-delay: -1.25s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(7) { animation-delay: -1.5s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(8) { animation-delay: -1.75s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(9) { animation-delay: -2s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(10) { animation-delay: -2.25s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(11) { animation-delay: -2.5s; }
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(12) { animation-delay: -2.75s; }
@keyframes sva-e0889f75c9-a10-sva-10-segmented-ring-cycle {
0%, 100% { opacity: 0.28; transform: scale(0.92); }
8% { opacity: 1; transform: scale(1); }
18% { opacity: 0.62; transform: scale(0.97); }
30% { opacity: 0.3; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment {
animation: none !important;
opacity: 0.22;
transform: scale(1);
}
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(1),
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(2),
#sva-e0889f75c9-a10-sva-10-segmented-ring-root .sva-10-segmented-ring-segment:nth-child(3) {
opacity: 1;
}
}
</style>
<g id="sva-e0889f75c9-a10-sva-10-segmented-ring-ring" data-role="progress-ring" fill="none" stroke="#FFE37A" stroke-width="3" stroke-linecap="round">
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M64 11 A53 53 0 0 1 90.5 18.1"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M90.5 18.1 A53 53 0 0 1 109.9 37.5"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M109.9 37.5 A53 53 0 0 1 117 64"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M117 64 A53 53 0 0 1 109.9 90.5"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M109.9 90.5 A53 53 0 0 1 90.5 109.9"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M90.5 109.9 A53 53 0 0 1 64 117"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M64 117 A53 53 0 0 1 37.5 109.9"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M37.5 109.9 A53 53 0 0 1 18.1 90.5"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M18.1 90.5 A53 53 0 0 1 11 64"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M11 64 A53 53 0 0 1 18.1 37.5"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M18.1 37.5 A53 53 0 0 1 37.5 18.1"/>
<path class="sva-10-segmented-ring-segment" data-role="ring-segment" d="M37.5 18.1 A53 53 0 0 1 64 11"/>
</g>
<g id="sva-e0889f75c9-a10-sva-10-segmented-ring-motif" data-motif="Pineapple" data-role="main-motif">
<path data-role="crown-back" d="M57 48 C52 39 48 31 50 20 C56 25 60 30 62 36 C61 26 63 17 69 10 C72 21 72 29 69 38 C74 30 80 25 87 22 C86 33 80 42 72 49 Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="fruit-body" d="M43 48 C47 42 54 40 64 40 C74 40 81 42 85 48 C89 55 88 76 84 91 C81 101 74 106 64 106 C54 106 47 101 44 91 C40 76 39 55 43 48 Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="crown-front" d="M49 49 C54 45 59 44 64 45 C69 44 75 45 80 49 C75 51 70 52 64 51 C58 52 53 51 49 49 Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<g data-role="diamond-lattice" fill="none" stroke="#FFE37A" stroke-width="1.2" stroke-linecap="round" opacity="0.9">
<path d="M45 58 L64 75 L83 58"/>
<path d="M43 70 L64 89 L85 70"/>
<path d="M44 82 L61 98"/>
<path d="M84 82 L67 98"/>
<path d="M52 49 L47 94"/>
<path d="M64 47 L64 103"/>
<path d="M76 49 L81 94"/>
</g>
<path data-role="highlight" d="M51 57 C50 68 51 77 54 84" fill="none" stroke="#FFFDF5" stroke-width="2" stroke-linecap="round" opacity="0.55"/>
</g>
</svg>