spin.js
A spinning activity indicator
Spin.js is a tiny JavaScript library that adds an animated loading spinner to any webpage using pure CSS, no images, no dependencies, sharp on all screen resolutions.
Spin.js is a small JavaScript library that displays an animated loading spinner on a webpage. It is the kind of circular spinning indicator you see when an app is loading or waiting for data to come back from a server.
The library works without images and without depending on any other libraries, keeping it very lightweight. The spinning animation is built entirely with CSS keyframe animations, which means it scales cleanly to any size and looks sharp on high-resolution screens. Because it relies on CSS rather than images, there are no files to download beyond the library itself.
It works across all major browsers and ships with TypeScript definitions, so it fits into projects that use typed JavaScript as well as those that do not. It is distributed as a native ES6 module, the modern standard for importing JavaScript code.
Installing it takes a single command via npm. Using it means importing the Spinner class, selecting an HTML element on the page to attach the spinner to, and optionally passing in settings such as the color or the number of lines that make up the spinning shape. The README is brief and points to the project's homepage for an interactive demo where you can adjust all the configuration options and see the results live.
The library is licensed under MIT, meaning it is free to use in personal and commercial projects without restrictions.
Where it fits
- Show an animated loading indicator on a webpage while waiting for data to come back from a server.
- Display a spinner during file uploads or long-running form submissions in a web app.
- Customize spinner size, color, and line count to match your site's visual design.