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:
Produces the overlap effect between the two circles. There are a bunch of different values for this; the native app appears to use
multiply looks cooler IMO 😎.
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!