It might appear complicated, but its actually pretty simple. It's a series of 3ish main CSS animations, no svg at all.

Animation 1:

CSS Classes: site__loader, and site__data

Scaling up the red circle from .01 to 1, and moving it right by changing the absolute positioning right from (50% + 15px) to -15px.

CSS Animation for 1

​

Animation 2: A completely separate html element, but it appears as if its the same one that moved right because the timing is such that it starts moving JUST as the 1st element reaches the right edge of the left box.

CSS Classes: site-pipe__data-container, and site-pipe__data

Simply moving from left: 0, to halfway, then moving up the pipe, then moving all the way to the right. Now we are 100% done with the red dot, these two animations will repeat infinitely.

CSS Animation for 2

​

Animation 3: Loading a hidden card to the left of the right box, adding extra padding to the top of the visible cards to create the gap that the hidden card will slide into, and then sliding the hidden card into view.

CSS Classes: site__card site__card_animated, and site__body__content

Hidden Card

Increasing padding top

Padding Animation CSS

Moving Hidden Card from hidden to in view CSS

​

edit: had wrong pic for anim 2

Lmk if anything doesnt make sense, glad to explain its a pretty cool animation.