15 Best Loading Spinner Plugins In JavaScript And Pure CSS (2024 Update)
What Is Loading Spinner?
Loading spinner is an animated loading progress indicator that can be used to indicate or visualize the current loading status (progress) while loading asynchronous content into the web app.
The Best Loading Spinner
This is a fresh, hand-picked list of 15 best loading spinner JavaScript plugins and CSS packs to help you quickly insert a custom loading indicator into your web project. I hope you like it.
Originally Published Jan 01 2018, updated Jan 18 2024
Table of contents:
jQuery Loading Spinner Plugins:
Loading Indicator For Bootstrap 5/4 Form Controls - Input Spinner
A CSS/SCSS library that allows you to display an animated, customizable loading spinner/indicator inside Bootstrap form controls like input, textarea, and select.
jQuery Plugin For Creating Loading Overlay with CSS3 Animations - waitMe
waitMe is a very lightweight (~1.55 kb minified) jQuery plugin for creating an Ajax loading overlay with loading text and animated loading spinner using CSS3 aniamtions.
Simple Flexible Loading Overlay Plugin With jQuery - loadingoverlay.js
loadingoverlay.js is a simple, flexible jQuery plugin which shows a highly customizable loading overlay with custom spinners while loading some data within a specific container.
Fullscreen Loading Modal / Indicator Plugin For jQuery - loadingModal
A simple yet customizable jQuery loading indicator plugin which displays a fullscreen loading modal / overlay with more than 10 CSS3 powered loading spinners.
Circle Loading Animation In jQuery & CSS3 - shCircleLoader
A jQuery plugin that uses CSS3 animations to create customizable and animated circle loading animations (also known as a loading spinner, loading indicator, and other terms).
Vanilla JS Loading Spinner Plugins:
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.
Beautiful Loading Spinners & Progress Bars – Loading-Visualization
A JavaScript/CSS library to visualizing loading status in animated, customizable loading spinners & progress bars.
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).
Animated SVG Loading Spinner – loader.js
An animated loading spinner built with SVG and CSS animations.
Pure CSS Loading Spinner Packs:
Three Dots
A small CSS/CSS3 library that provides a set of 20 fancy animated loading spinners created with three dots.
SpinKit
Simple loading spinners animated with CSS. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.
Loaders.css
Delightful, performance-focused pure css loading animations.
Single Element CSS Spinners
A collection of loading spinners animated with CSS.
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.
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.
Conclusion:
Seeking more jQuery plugins or JavaScript libraries to create awesome Loading Spinner/Indicator on the web & mobile? See jQuery Loading Spinner and JavaScript/CSS Loading Spinner sections for more details.
See also:
- 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries
- 7 Best Loading/Progress Indicator Libraries For Vue.js
- 10 Best Loading Spinner & Indicator Components For React And React Native
- 80+ Best Pure CSS Loading Spinners For Front-end Developers
- 7 Best Skeleton Loaders In JavaScript And Pure CSS
