LOADING SHIMMER GENERATOR

It’s a new practice now-a-days to show the loading as a shimmer effect. Facebook has initially started this and even google drive implements it. Continue to the loading shimmer css generator I've designed for it.


How to add it to my website?

Download the CSS file and add the generated HTML code in your website

<!-- Auto generated CSS & HTML -->

How loading shimmer works?

We basically move the background image which is a gradient generated using CSS along the x-axis. The gradient is chosen as such there is a small sliver of darker color. For example, we have a 200px by 200px circle with a background of #f6f7f8 and background-image in CSS. Notice the #ed33f1 at the 20% mark. This is darker than the background of the circle.

background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);

So now, all it takes is to use css keyframes on the circle to animate the background in an infinite loop.

Alert SVG Cookie Consent

This website uses cookies and similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our Privacy policy.