TikTok Loader in CSS 🎶

#css #animation #loader #webdev

I like TikTok's loading animation, here's my attempt to recreate it with just a few lines of CSS:

A couple properties/tricks that make this possible:

`mix-blend-mode`

Produces the overlap effect between the two circles. There are a bunch of different values for this; the native app appears to use color-dodge but multiply looks cooler IMO 😎.

`animation-delay`

The animation-delay property is used to apply the same animation to different elements at different starting keyframes. Passing a delay of half the length of the full animation will offset it halfway, and making it negative will prevent an initial pause for the delay to end.

~~P.S. doesn't look like the TikTok web app has a loading animation, feel free to use this on the site @tiktokdevs 😇~~ Nevermind, not true! Just noticed it.

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started