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.
Top comments (1)
Nice :) thanks!