Loading Animation
About this project
This project recreates a circuit board loader animation using pure SVG and CSS, no JavaScript required. The design features a dark chip component sitting at the center of the screen with glowing trace lines running into it from both sides, resembling electrical pathways on a printed circuit board. Each trace lit up with a distinct neon color, including purple, blue, yellow, green, and red, and the glowing segments travel continuously along the paths using CSS stroke-dasharray and stroke-dashoffset animation. The chip itself is built with layered SVG shapes and linear gradients to give it a metallic, embossed look, complete with connector pins on each side and a "Loading" label rendered in the center. The overall effect mimics current flowing through a live circuit, making it a strong candidate for a loading screen or a technical, engineering themed UI element.
What you will learn
Working through this project teaches how SVG paths can be combined with CSS animation to simulate motion without relying on JavaScript. You will learn how stroke-dasharray and stroke-dashoffset work together to create the illusion of a signal traveling along a line, which is one of the most useful techniques for building animated diagrams, timelines, or flow visualizations. The project also covers how to define and apply SVG linear gradients for realistic shading on shapes like the chip body and its pins, along with how drop-shadow filters can be layered onto SVG elements to produce glow effects that respond to color changes through the currentColor property. Beyond the animation mechanics, you will also get practice structuring a moderately complex SVG scene with multiple reusable elements and coordinating timing across several animated paths so they feel synchronized rather than random.
Understand the code
Read a plain-language overview or a file-by-file breakdown. Ask questions about the project below the overview.
This project presents a dynamic loading animation designed to visually represent data processing or activity. It features a stylized circuit board with a central processing unit (CPU) and multiple interconnected traces, where animated colored lights appear to flow, indicating ongoing operations. The central component displays "Loading" text, providing clear feedback to the user.
The entire visual component is constructed using SVG (Scalable Vector Graphics) embedded directly within the HTML document. SVG path elements define the circuit traces, with pairs of paths creating a static background and an overlaying animated flow. A central rect element forms the main chip, surrounded by smaller rect elements representing pins, and a text element displays "Loading". Gradients defined in the <defs> section provide realistic shading for the chip, pins, and text.
<svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="chipGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2d2d2d"></stop>
<stop offset="100%" stop-color="#0f0f0f"></stop>
</linearGradient>
</defs>
<g id="traces">
<path d="M100 100 H200 V210 H326" class="trace-bg"></path>
<path d="M100 100 H200 V210 H326" class="trace-flow purple"></path>
</g>
<rect x="330" y="190" width="140" height="100" rx="20" ry="20" fill="url(#chipGradient)"></rect>
<text x="400" y="240" font-size="22" fill="url(#textGradient)">Loading</text>
</svg>This snippet illustrates how SVG elements like path, rect, and text are used, along with linearGradient definitions, to build the visual components of the circuit board.
CSS is responsible for the visual styling and the core animation logic. The body and .main-container styles center the SVG loader on the page. The "flow" effect along the traces is achieved by manipulating SVG stroke properties. Each .trace-flow element is given a stroke-dasharray to create a dashed line and an initial stroke-dashoffset to position the dashes off-screen.
.trace-flow {
stroke-width: 1.8;
fill: none;
stroke-dasharray: 40 400; /* Defines the length of the dash and the gap */
stroke-dashoffset: 438; /* Initial position of the dash, off-screen */
filter: drop-shadow(0 0 6px currentColor);
animation: flow 3s cubic-bezier(0.5, 0, 0.9, 1) infinite;
}This CSS rule sets up the appearance of the animated traces and links them to the flow animation, which will control their movement.
The flow animation is defined using @keyframes and continuously animates the stroke-dashoffset property. By transitioning stroke-dashoffset from its initial large value (438) down to 0, the visible dash segment appears to travel along the SVG path, creating the illusion of movement. Different CSS classes like .yellow, .blue, .green, .purple, and .red are applied to individual trace-flow paths to give them distinct colors, enhancing the visual appeal of the data flow.
@keyframes flow {
to {
stroke-dashoffset: 0; /* Moves the dash along the path to its final position */
}
}
.purple {
stroke: #9900ff;
color: #9900ff;
}These snippets illustrate the keyframe animation that drives the movement and how specific colors are applied to the traces.
Ask about this project
Have a question about how this project works? Ask below and get an answer based on the project code.
Code Breakdown
Structured technical breakdown for beginners.
No breakdown yet. Generate one to see a file-by-file explanation.
Comments
No comments yet. Sign in to leave a comment.
Sign in to leave a comment.