Loading Animation

This project builds a loading screen animation entirely without JavaScript. That is the first thing worth noting. Every movement you see happens through CSS keyframes and SVG filters working together. The eight white circles are plain HTML span elements. They have no class names beyond what the parent container gives them and no JavaScript touching them at runtime.

The circular movement works because each span has its transform-origin set to 150px. The .drops container is 300px wide. Setting the origin to 150px places the pivot point at the exact center of that container. When the animation rotates a span, it swings around that center point like a hand on a clock. Because all eight spans share the same center and the same rotation range, they all trace the same invisible circle.

What makes it look liquid instead of mechanical is the SVG filter named Gooey. The filter runs two operations in sequence. First feGaussianBlur blurs everything inside the .drops container. Second feColorMatrix cranks the contrast of the alpha channel to an extreme value. When two blurred shapes get close enough to each other their blurred edges overlap. The contrast boost then snaps that overlapping blur back to fully opaque. The result looks like the two drops are physically merging into a single blob. When they move apart the merged blob pinches and splits. That pinching and splitting is the liquid effect. It is not a real physics simulation. It is a visual trick done entirely with math applied to pixels.

The loading text sits on a separate layer above the drops container. It fades in and out on its own independent loop using a different keyframe animation. The timing is set to match the overall rhythm of the drops so the whole composition feels coordinated even though the text and drops are animated separately.

You will learn that CSS custom properties are not just for storing colors or font sizes. This project uses --i as an index variable set directly in the HTML. CSS then reads that index inside a calc() expression to compute a unique animation delay for each span. That pattern is reusable in dozens of other situations where you need to stagger repeated elements without writing unique styles for each one.

You will understand how transform-origin actually works. Most people set it and move on without thinking about why. This project forces you to understand it because the entire circular motion depends on getting that value exactly right. Change it by even a small amount and the circle becomes lopsided.

You will learn how SVG filters can be applied to HTML elements. The filter is defined inside an SVG block in the HTML but it is consumed by a CSS filter: url() rule on a regular div. That cross-technology connection is something many developers never encounter and it opens up a wide range of visual effects that are impossible with CSS alone.

You will also understand the difference between animating a property and animating a transform. The drops do not move by changing their left or top values. They move by rotating around a pivot point. That distinction matters because transform-based animations are handled by the GPU in most browsers. They stay smooth even on lower-end devices because the browser does not have to recalculate layout on every frame.

You will get comfortable reading and writing @keyframes that do more than one thing at once. The animateDrops animation changes rotation and scale at the same time. Understanding how to sequence those changes across percentage keyframes is a skill that applies to almost every CSS animation project you will work on after this.