Spinner Flower

Eight soft neon petals rotating around the center — pure CSS with themable size, speed, and colors.

Variants

Use this on your site (self-host)

Create /assets/preloaders/ and save spinner-flower.css there.
Add one of the HTML snippets where you want the spinner.
Tweak --size, --speed, and petal dimensions --petalW/--petalH. Optional: add the .pastel or .reverse class.

HTML

<link rel="stylesheet" href="/assets/preloaders/spinner-flower.css">

<!-- Default 8-petal spinner -->
<div class="rc-flower" role="status" aria-label="Loading"
     style="--size:96px;--speed:1200ms">
  <span class="sr-only">Loading…</span>
  <span class="petal p1"></span><span class="petal p2"></span>
  <span class="petal p3"></span><span class="petal p4"></span>
  <span class="petal p5"></span><span class="petal p6"></span>
  <span class="petal p7"></span><span class="petal p8"></span>
</div>

<!-- Pastel variant (smaller petals) -->
<div class="rc-flower pastel" role="status" aria-label="Loading"
     style="--size:72px;--speed:1000ms;--petalH:34px;--dotGlow:.25">
  <span class="sr-only">Loading…</span>
  <span class="petal p1"></span><span class="petal p2"></span>
  <span class="petal p3"></span><span class="petal p4"></span>
  <span class="petal p5"></span><span class="petal p6"></span>
  <span class="petal p7"></span><span class="petal p8"></span>
</div>

CSS

/* RetroCrave — Spinner Flower (CSS-only) */
.rc-flower{
  --size: 96px;
  --speed: 1200ms;
  --petalW: 14px;
  --petalH: 40px;
  --dotGlow: .35; /* 0–.6 */

  position:relative; width:var(--size); height:var(--size);
  display:inline-grid; place-items:center;
  animation: rc-rotate var(--speed) linear infinite;
  filter: drop-shadow(0 0 16px rgba(255,107,214,var(--dotGlow)));
}

@keyframes rc-rotate{ to{ transform: rotate(360deg); } }

/* Base petal */
.rc-flower .petal{
  position:absolute;
  width:var(--petalW); height:var(--petalH);
  left:calc(50% - var(--petalW)/2);
  top:calc(50% - var(--petalH));
  border-radius: calc(var(--petalW)/2) calc(var(--petalW)/2) 8px 8px;
  background: linear-gradient(180deg, #ff6bd6, #ff94e2);
  opacity:.95;
  transform-origin: 50% calc(100% - 8px);
  box-shadow: 0 0 10px rgba(255,107,214,.35);
}

/* 8 directions */
.rc-flower .p1{ transform: rotate(  0deg); }
.rc-flower .p2{ transform: rotate( 45deg); }
.rc-flower .p3{ transform: rotate( 90deg); }
.rc-flower .p4{ transform: rotate(135deg); }
.rc-flower .p5{ transform: rotate(180deg); }
.rc-flower .p6{ transform: rotate(225deg); }
.rc-flower .p7{ transform: rotate(270deg); }
.rc-flower .p8{ transform: rotate(315deg); }

/* Palette variants (optional) */
.rc-flower.pastel .petal{
  background: linear-gradient(180deg,#ffd3f6,#fff0fb);
  box-shadow: 0 0 10px rgba(255,211,246,.28);
}
.rc-flower .p3{ background:linear-gradient(180deg,#5ef1ff,#9cf7ff); }
.rc-flower .p4{ background:linear-gradient(180deg,#c0ffe6,#e9fff5); }
.rc-flower .p5{ background:linear-gradient(180deg,#ffe66b,#fff09b); }
.rc-flower .p7{ background:linear-gradient(180deg,#ffd3f6,#fff0fb); }

/* Reverse spin */
.rc-flower.reverse{ animation-direction: reverse; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rc-flower{ animation: none !important }
}

Make it denser by increasing --petalW or --petalH.
Use .reverse for opposite direction; .pastel softens the palette.