Loading spinners with CSS

Published on September 19, 2023

← Back to tips

If you ever use a loading spinner managed by JavaScript, consider using CSS:

CSS is parsed and compiled when the page loads but JavaScript is executed at runtime. This can lead to performance issues, especially if the loader is complex or animated.

Causes issues when the content re-rendering effort is huge while something is loading.

Moreover, it isn’t hard to make a spinner accessible. You don’t need a library to do this for you. Here is an example of an accessible spinner, which can have custom css styling to make it look like a loader.

Furthermore, consolidating everything in CSS streamlines customization, particularly with the utilization of CSS variables. Unlike libraries that may employ their own unique approaches, CSS enables simpler customization.

In addition, libraries often pose a challenge in maintaining consistent alignment throughout the application because of the wide array of customization options they provide.

#webdev #accessibility #css

🎉 Interested in Frontend or Indie-hacking?

I talk about the latest in frontend, along with my experience in building various (Indie) side-projects