10 Best Loading Spinner/Indicator JavaScript & CSS Libraries (2024 Update)

This is a fresh new collection of the 10 best JavaScript and/or CSS libraries to create and display animated, customizable loading spinners and loading indicators when loading dynamic content into the page.

Originally Published Jan 3 2018, updated Jan 17 2024

1. Three Dots

A small CSS/CSS3 library that provides a set of 20 fancy animated loading spinners created with three dots.

Fancy Three-dots Loading Spinners With Pure CSS – Three Dots

[Demo] [Download]


2. SpinKit

Simple loading spinners animated with CSS. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.

SpinKit

[Demo] [Download]


3. Minimal SVG Loading Spinner In Pure JS – LoadingSpinner.js

A vanilla JavaScript plugin to show a basic, animated, SVG-based loading spinner on the screen when needed.

Minimal SVG Loading Spinner In Pure JS – LoadingSpinner.js

[Demo] [Download]


4. Loaders.css

Delightful, performance-focused pure css loading animations.

Loaders.css

[Demo] [Download]


5. Beautiful Loading Spinners & Progress Bars – Loading-Visualization

A JavaScript/CSS library to visualizing loading status in animated, customizable loading spinners & progress bars.

Beautiful Loading Spinners & Progress Bars – Loading-Visualization

[Demo] [Download]


6. Single Element CSS Spinners

A collection of loading spinners animated with CSS.

Single Element CSS Spinners

[Demo] [Download]


7. iOS Style Loading Spinner with Pure CSS – ispinner

A lightweight CSS library that helps you display an iOS style animated loading indicator while data in specific area is loading.

iOS Style Loading Spinner with Pure CSS – ispinner

[Demo] [Download]


8. Loading Spinner On Submit Button While Submitting Form – SpinOnSubmitJS

A tiny JavaScript library that shows a loading spinner on submit button while submitting a form (e.g. logins and signups are processing data).

Loading Spinner On Submit Button While Submitting Form – SpinOnSubmitJS

[Demo] [Download]


9. 12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

A set of 12+ pure CSS single element loading spinners which can be used to indicate the content loading status in an elegant way. Fully customizable via SCSS.

12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

[Demo] [Download]


10. Animated SVG Loading Spinner – loader.js

An animated loading spinner built with SVG and CSS animations.

Animated SVG Loading Spinner – loader.js

[Demo] [Download]


More Resources:

Looking for more JavaScript & CSS solutions to create loading & progress indicates on your ap?. Here are a few resources we found on the web:

You Might Be Interested In: