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 23 2023
1. SpinKit
Simple loading spinners animated with CSS. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.
2. Loaders.css
Delightful, performance-focused pure css loading animations.
3. Single Element CSS Spinners
A collection of loading spinners animated with CSS.
4. Pure CSS Single Element Loading Indicator Collection – text-spinners
A collection of 29+ CSS/CSS3 powered single element loading indicator for ajax requests and/or asynchronous operations.
5. Facebook Inspired Skeleton Loader In Pure CSS – Placeholder Loading
This is the pure CSS solution to create simple, animated, customizable skeleton loading effect as you’ve seen on Facebook.
6. css-spinner
Collection of 12 small, elegant pure css spinners for your website’s loading animation.
7. 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.
8. Beautiful Loading Spinners & Progress Bars – Loading-Visualization
A JavaScript/CSS library to visualizing loading status in animated, customizable loading spinners & progress bars.
9. loadingOverlay.js
A standalone JavaScript library to create a configurable loading spinner (overlay) with spin handles support.
10. Slick Content Loader With Vanilla JavaScript – slick-loader
A small and developer-friendly content loader JavaScript library for the web.
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: