Sunflower Dots Loader: Pure CSS Loading Animation

Sunflower Dots Loader

Twenty-four seeds bloom outward on the golden angle, like the center of a sunflower, then fade from the middle out while the head slowly turns. Each dot's radius comes from a --r value in the markup.

Also known as: phyllotaxis loader, golden angle dots, blooming dots animation.

Color Size 64px Dark background

HTML

<div class="ldr-sunflower-dots" role="status" aria-label="Loading">
  <span style="--i:0;--r:0.065"></span><span style="--i:1;--r:0.113"></span><span style="--i:2;--r:0.145"></span><span style="--i:3;--r:0.172"></span>
  <span style="--i:4;--r:0.195"></span><span style="--i:5;--r:0.216"></span><span style="--i:6;--r:0.235"></span><span style="--i:7;--r:0.252"></span>
  <span style="--i:8;--r:0.268"></span><span style="--i:9;--r:0.284"></span><span style="--i:10;--r:0.298"></span><span style="--i:11;--r:0.312"></span>
  <span style="--i:12;--r:0.325"></span><span style="--i:13;--r:0.338"></span><span style="--i:14;--r:0.350"></span><span style="--i:15;--r:0.362"></span>
  <span style="--i:16;--r:0.374"></span><span style="--i:17;--r:0.385"></span><span style="--i:18;--r:0.396"></span><span style="--i:19;--r:0.406"></span>
  <span style="--i:20;--r:0.417"></span><span style="--i:21;--r:0.427"></span><span style="--i:22;--r:0.436"></span><span style="--i:23;--r:0.446"></span>
</div>

CSS

.ldr-sunflower-dots {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.2);
  height: calc(var(--s) * 1.2);
  animation: ldr-sunflower-dots-turn 9.6s linear infinite;
}
.ldr-sunflower-dots span {
  --d: calc(var(--s) * (0.09 + var(--i) * 0.0022));
  position: absolute;
  top: calc(50% - var(--d) / 2);
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  transform: rotate(calc(var(--i) * 137.508deg)) translateY(calc(var(--r) * var(--s) * -1.2));
}
.ldr-sunflower-dots span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);
  animation: ldr-sunflower-dots-bloom 3.2s infinite;
  animation-delay: calc(var(--i) * 0.05s - 3.2s);
}
@keyframes ldr-sunflower-dots-bloom {
  0%        { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
  10%, 58%  { transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  70%, 100% { transform: scale(0); }
}
@keyframes ldr-sunflower-dots-turn {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-sunflower-dots, .ldr-sunflower-dots *, .ldr-sunflower-dots::before, .ldr-sunflower-dots::after, .ldr-sunflower-dots *::before, .ldr-sunflower-dots *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Sunflower Dots Loader

HTML

CSS

Customizing this loader

Similar loaders