Xbox One like preloader with css

Having fun with css

I like to experiment with css and creating such effects as seen in this preloader. It is inspired by the loading screen of the xbox one. You can check out the result below. Navigate through the tabs in the window below to see the HTML or CSS.

See the Pen Css Loader – Xbox One Style by kadir (@kadirinan) on CodePen.

How to approach something like this

First of all you should make clear what the animation looks like and analyze what is happening.

If you look closely you can tell that the circle gets bigger. At a certain point the circle dissolves to the outside. This basically resembles a drop falling onto the ground.

After you have done your observation you might start thinking of how to achieve this in CSS. For this post I have been using css with keyframes.

The most important factor here was the box-shadow element. A while ago I have had explained something similar with buttons. The graphic nicely shows how the box shadow is acting like. It is dissolving through the edges.


I hope you enjoyed this post and have some use of it.