Animated CPU Circuit Loader

This Animated CPU Circuit Loader brings a hardware-inspired aesthetic to your loading states. It visualizes data processing as colorful pulses of energy traveling along printed circuit board (PCB) traces into a central processor. The effect creates a sense of high-tech activity, perfect for dashboards, tech blogs, or system status pages.

Core Technique

The animation relies on the classic SVG stroke-dasharray and stroke-dashoffset trick, applied to duplicate path layers.

1. Dual Layer Paths: Each circuit trace is drawn twice.
   • .trace-bg: A solid, dark grey line acting as the physical “wire” on the board.
   • .trace-flow: An overlay path with the same geometry but styled with bright colors (neon green, blue, yellow, etc.).
2. Dash Flow Animation: The colored paths have a stroke-dasharray: 40 400. This creates a short “packet” of visible line (40px) followed by a long gap (400px).
3. Movement: The @keyframes flow animation continuously changes the stroke-dashoffset from 438 to 0. This physically moves the dash pattern along the SVG path, simulating data transmission without needing JavaScript.

Customization

You can easily change the speed or the length of the “data packets” by modifying the CSS variables or properties.

.trace-flow {
  /* Change 40 (dash length) and 400 (gap length) */
  stroke-dasharray: 60 300; 
  
  /* Adjust animation duration for speed */
  animation: flow 2s linear infinite; 
}

To change the circuit layout, you need to edit the d attribute of the SVG <path> elements in the HTML.

Tips

1. Accessibility: The loader contains text (“Loading”) but SVG text isn’t always announced reliably by screen readers in this context. It’s best to add role="status" and aria-label="Loading data" to the container div or the SVG itself.

2. Performance: Since this uses SVG stroke manipulation on the GPU-accelerated compositor thread (mostly), it is very performant. However, adding filter: drop-shadow(...) can be expensive on low-end mobile devices. If you notice lag, try removing the glow filters from the .trace-flow class.