jQuery Script Blog

15 Best Loading Spinner Plugins In JavaScript And Pure CSS (2026 Update)

by jQueryScript, 01/01/2026 04:30:21 UTC

loading spinner loading indicator

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 01 2026

Table of contents:

jQuery Loading Spinner Plugins
Vanilla JS Loading Spinner Plugins
Pure CSS Loading Spinner Packs

jQuery Loading Spinner Plugins:

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 animations.

[Demo] [Download]

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.

Ideal for creating a use-friendly 'busy' loading screen over a specific element that is typically being called via AJAX requests.

Features:

rotatingPlane
wave
wanderingCubes
spinner
chasingDots
threeBounce
circle
cubeGrid
fadingCircle
foldingCube

[Demo] [Download]

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.

[Demo] [Download]

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).

[Demo] [Download]

Elegant Customizable Loading Indicator For jQuery - preloader

A simple, lightweight jQuery loading indicator plugin to create content loaders and preloaders while data in a specific area is loading. With support for custom loading text, percentage value, and duration.

[Demo] [Download]

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.

Features:

Vanilla JavaScript (No jQuery).
Dynamic SVG injection.
Zero CSS dependencies.
Simple configuration API.

[Demo] [Download]

Beautiful Loading Spinners & Progress Bars – Loading-Visualization

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

Features:

Includes circular spinners.
Includes linear progress bars.
Hybrid JS/CSS implementation.
Customizable animation speeds.

[Demo] [Download]

Animated SVG Loading Spinner – loader.js

An animated loading spinner built with SVG and CSS animations.

Features:

SVG architecture.
CSS-driven animation.
Scales without pixelation.
Smooth frame rates.

[Demo] [Download]

Configurable Loading Spinner With Pure JS – loadingOverlay.js

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

[Demo] [Download]

Rotating Loading Spinner In JavaScript – ZlataLoader.js

A minimal JavaScript library to create animated loaders that rotate a loading spinner of your choice along a circle.

Rotating Loading Spinner In JavaScript – ZlataLoader.js

[Demo] [Download]

Pure CSS Loading Spinner Packs:

Animated Skeleton Loading Screens In Pure CSS

This CSS library creates animated skeleton previews of block content during data load. You can use it to show placeholder layouts for text, cards, and images before real content arrives.

Features:

Pure CSS implementation with no JavaScript required
Animated shimmer effect across placeholder blocks
Customizable via CSS variables for colors and timing
Works with standard HTML structure
Lightweight footprint under 5KB

[Demo] [Download]

100+ Open-source Animated SVG Loading Spinners

SVG Spinners offers a large collection of over 100 vector-based indicators. You can implement these as inline code or image tags.

Features:

100+ distinct variations.
Scalable Vector Graphics (SVG) format.
Supports inline embedding.
High-resolution rendering.

[Demo] [Download]

Three Dots

Three Dots utilizes CSS3 to create twenty distinct animations based on a three-dot pattern. The library focuses specifically on horizontal dot interactions.

Key Features:

20 preset animations.
Single-element CSS usage.
Small file size.
Customizable colors.

[Demo] [Download]

Facebook Inspired Skeleton Loader In Pure CSS – Placeholder Loading

This solution replicates the skeleton loading effect found on Facebook. It uses pure CSS to create the shimmering placeholder animation.

Key Features:

Replicates Facebook design language.
Pure CSS construction.
Customizable geometry.
Smooth shimmer animation.

[Demo] [Download]

iOS Style Loading Spinner with Pure CSS – ispinner

ispinner helps you generate an iOS-style activity indicator using standard CSS. It targets developers who need a native mobile look on the web.

Key Features:

Native iOS aesthetic.
Adjustable size and speed.
Lightweight CSS.
No images required.

iOS Style Loading Spinner with Pure CSS – ispinner

[Demo] [Download]

More Resources:

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: