DEV Community

loading...

TikTok Loader in CSS ๐ŸŽถ

Bryce Dorn
โ˜•๏ธ ๐Ÿถ ๐Ÿƒโ€โ™‚๏ธ ๐ŸŽถ ๐ŸŽฎ โšฝ๏ธ ๐Ÿ•
ใƒป1 min read

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.

Discussion (1)

Collapse
livetvchannels profile image
Live TV Channels

Nice :) thanks!

Forem Open with the Forem app