Light Bulb Loader: Pure CSS Loading Animation

Light Bulb Loader

A light bulb flickers on, glows with a burst of rays, then switches off again. Reads as 'thinking of an idea', so it suits AI, brainstorming and generate buttons. One inline SVG.

Also known as: lightbulb animation css, idea loader, bulb switching on animation.

Color Size 64px Dark background

HTML

<div class="ldr-light-bulb" role="status" aria-label="Loading">
  <svg viewBox="0 0 48 48" aria-hidden="true">
    <path class="ldr-light-bulb-rays" d="M24 6.5v-4M33.5 10.5l2.8-2.8M14.5 10.5l-2.8-2.8M37.5 20h4M10.5 20h-4"/>
    <path class="ldr-light-bulb-glow" d="M19 34v-4.5c-3.2-2-5-5.4-5-9.5a10 10 0 0 1 20 0c0 4.1-1.8 7.5-5 9.5V34z"/>
    <path d="M19 34v-4.5c-3.2-2-5-5.4-5-9.5a10 10 0 0 1 20 0c0 4.1-1.8 7.5-5 9.5V34z"/>
    <path class="ldr-light-bulb-filament" d="M21.5 30v-5l1.25-1.5 1.25 1.5 1.25-1.5 1.25 1.5v5"/>
    <path d="M19.5 38h9M21 42h6"/>
  </svg>
</div>

CSS

.ldr-light-bulb {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
}
.ldr-light-bulb svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ldr-light-bulb-glow {
  fill: var(--c);
  stroke: none;
  opacity: 0;
  animation: ldr-light-bulb-on 2.4s infinite;
}
.ldr-light-bulb-filament {
  stroke-width: 1.8;
  animation: ldr-light-bulb-filament 2.4s infinite;
}
.ldr-light-bulb-rays {
  transform-origin: 50% 41.7%;
  opacity: 0;
  animation: ldr-light-bulb-rays 2.4s infinite;
}
@keyframes ldr-light-bulb-on {
  0%, 26%   { opacity: 0.12; }
  29%       { opacity: 1; }
  32%       { opacity: 0.2; }
  36%, 80%  { opacity: 1; }
  90%, 100% { opacity: 0.12; }
}
@keyframes ldr-light-bulb-filament {
  0%, 35%   { stroke: var(--c); }
  36%, 80%  { stroke: color-mix(in srgb, var(--c) 25%, #fff); }
  81%, 100% { stroke: var(--c); }
}
@keyframes ldr-light-bulb-rays {
  0%, 36%   { opacity: 0; transform: scale(0.7); }
  44%       { opacity: 1; transform: scale(1.12); animation-timing-function: ease-in-out; }
  52%       { opacity: 1; transform: scale(1); }
  66%       { opacity: 1; transform: scale(1.06); }
  80%       { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-light-bulb, .ldr-light-bulb *, .ldr-light-bulb::before, .ldr-light-bulb::after, .ldr-light-bulb *::before, .ldr-light-bulb *::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.

Light Bulb Loader

HTML

CSS

Customizing this loader

Similar loaders