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

This is a fresh new collection of 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 Feb 13 2022

1. Three Dots

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

Demo Download

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


2. Animated Skeleton Loading Screens In Pure CSS

Animated Skeleton Loading Screens In Pure CSS

Demo Download

A CSS skeleton loader library that creates an animated skeleton preview of your block content (e.g. text, cards, images) when the data is loading.


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

Beautiful Loading Spinners & Progress Bars – Loading-Visualization

[Demo] [Download]

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


4. ispinner

ispinner

Demo Download

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


5. css-loader

css-loader

Demo Download

css-loader is a set of loading indicators / spinners built using single DIV element and pure CSS/CSS3. Useful to notify you of current loading state during a specific call to and from the server.


6. Fullscreen Loading Indicator – ui-preloader

Fullscreen Loading Indicator – ui-preloader

Demo Download

A minimal clean loader UI component to create a customizable, fullscreen, CSS3 animated indicator for any loading process.


7. LoadingSpinner.js

Minimal SVG Loading Spinner In Pure JS - LoadingSpinner.js

Demo Download

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


8. iOS & OS X Style Pure CSS Loading Spinner

iOS & OS X Style Pure CSS Loading Spinner

Demo Download

A pure CSS/CSS3 based loading spinner with fullscreen overlay inspired by Apples’s iOS & OS X.


9. SpinThatShit

12+ Pure CSS/SCSS Loading Indicators – SpinThatShit

Demo Download

SpinThatShit is 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.


10. loadingOverlay.js

loadingOverlay.js

Demo Download

A standalone JavaScript library to create a configurable loading spinner (overlay) with spin handles support.


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: