Subscribe and get access to my free weekly newsletter where I break down the latest happenings in the world of code
SHARE
ThatSoftwareDude
Pure CSS Loading Skeleton Screens
August 25, 2025
β
Hello there! π
Last month I tackled on an item on my task list that had been sitting there for months. It seemed trivial, so I postponed it as much as I could, but after implementing it, it has made a huge difference.
Our company site was getting slower and slower as we added more and more features. Users would click to load their dashboard, see a mostly blank screen for a few seconds, then boom, everything would appear at once.
Our actual load times were ok. Around 1-2 seconds on average. Not blazing fast, but definitely reasonable.
But I realized the problem wasn't speed. It was the generic looking 'loading' icon that floated in and out of view that made the whole page look and feel cheap.
So I spent a weekend implementing skeleton screens across our entire app. I built them for profile cards, article listings, dashboard components, etc.
The difference was immediate.
Same load times. Same backend performance. But suddenly our app felt twice as fast and looked much better. At least to me, and I'm usually not a fan of my work.
All because instead of showing blank screens, we were showing users a preview of what was coming.
So I broke down the process in an article and included some of the templates that I used, using CSS only, so you won't see a big performance hit.
In the world of web development, sometimes it's the tedious boring bits that end up making the biggest difference.
β