Loading Animation

AI Overview: Acrobatic Loading Animation

This project is a stylized "Acrobatic Loading Animation" designed to provide a visually engaging experience while a user waits for content to load. Unlike a standard spinning wheel, this animation features a colorful "worm" that travels around a circular track before leaping upward into a vertical loop, creating a fluid and playful motion.

The structure of the animation is built entirely using SVG (Scalable Vector Graphics). The HTML defines the shapes, including a static background ring and two separate paths for the moving "worm." It also uses SVG linear gradients to give the animation its vibrant blue and purple color scheme.

<linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="hsl(223,90%,55%)" />
    <stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>

The code above defines a color gradient that is applied to the moving paths to give them a smooth transition between different shades of blue.

The "acrobatic" movement is controlled by CSS Keyframes. The logic relies on the stroke-dasharray and stroke-dashoffset properties, which allow the code to treat the borders of the shapes like a string that can be pulled or stretched. By timing two different animations (worm1 and worm2), the project makes it look like a single object is transitioning from a circle to a taller, more complex path.

.ap__worm1,
.ap__worm2 {
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

This CSS snippet ensures that both parts of the animation run for three seconds and loop forever.

Finally, the project is designed to be responsive and user-friendly. It uses CSS variables for easy color management and includes a "Dark Mode" feature. By using a media query, the animation automatically adjusts its background and ring colors to match the user's system preferences, ensuring it looks great in any environment.

@keyframes worm1 {
  from {
    animation-timing-function: ease-in-out;
    stroke-dashoffset: -87.96;
  }
  20% {
    animation-timing-function: ease-in;
    stroke-dashoffset: 0;
  }
  /* ... further keyframes ... */
}

This snippet shows how the animation changes the position of the line over time to create the illusion of crawling.