Crazy Loading Animation

AI Overview: Crazy Loading Animation

The Crazy Loading Animation is a visually dynamic, CSS-only loading spinner designed to provide a high-quality "stunt" effect. It features a "worm" that travels along a circular path, performing flips and color transitions as it moves. This project is ideal for modern web interfaces that need a lightweight, scalable, and eye-catching progress indicator.

The project is built entirely using SVG (Scalable Vector Graphics) and CSS animations. The HTML structure defines the paths and shapes, while the CSS handles the movement, timing, and color schemes. By using SVG masks and gradients, the animation creates a seamless transition between different colors as the "worm" loops around the ring.

Key Code Parts

1. SVG Masks and Gradients
The HTML uses a <defs> section to create masks and gradients, which allow the "worm" to change colors or appear to pass through different layers.

<mask id="mask1">
    <rect x="0" y="0" width="128" height="128" fill="url(#grad1)" />
</mask>

This snippet defines a mask that uses a linear gradient to control the visibility and color blending of the moving paths.

2. Stroke Dash Array
The "worm" effect is created by manipulating the stroke-dasharray property, which defines the length of the visible line and the gap following it.

<path class="sp__worm1" d="M120,64c0,30.928-25.072,56-56,56S8,94.928,8,64" stroke-dasharray="43.98 307.87" />

This code sets the initial length of the moving segment so it looks like a short "worm" rather than a full circle.

3. CSS Keyframe Animations
The movement is driven by complex @keyframes that change the stroke-dashoffset, making the line appear to "crawl" forward.

@keyframes worm1 {
  from, to { stroke-dashoffset: 0; }
  25% { stroke-dashoffset: -307.88; }
  50% { stroke-dashoffset: -483.8; }
}

This animation sequence calculates specific offsets to ensure the worm moves smoothly and stays aligned with the circular track.

4. Responsive Dark Mode
The project includes a media query to automatically adjust the background and ring colors based on the user's system settings.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 5%);
    --fg: hsl(var(--hue), 90%, 95%);
  }
}

This snippet updates the CSS variables to ensure the animation remains visible and aesthetically pleasing in dark mode.