Skip to main content
CSS is fun and cool and I like it.

Let’s Make a Fancy, but Uncomplicated Page Loader

It’s pretty common to see a loading state on sites these days, particularly as progressive web apps and reactive sites are on the rise. It’s one way to improve “perceived” performance — that is, making it feel as though the site is loading faster than it actually is.

There’s no shortage of ways to make a loader — all it takes is a quick search on CodePen to see oodles of examples, from animated GIFs to complex animations. While it’s … Read article “Let’s Make a Fancy, but Uncomplicated Page Loader”


Fade Image Into Another Image

Make a div that is the exact size of the image. This div will have a background image applied to it of the second image. Then put an inline image inside it.

<div id="kitten" style="background-image: url(dog.jpg);">
  <img src="/images/kitten.jpg" alt="Kitten" />

Fading the inline image in and out will reveal/hide the second (background) image.



}, function() {


Read article “Fade Image Into Another Image”