explaingit

fgnass/spin.js

★ 9,266CSSAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

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.

Mindmap

mindmap
  root((spin.js))
    What it does
      CSS loading spinner
      No images needed
      Any screen resolution
    Tech Stack
      JavaScript
      CSS animations
      TypeScript types
      ES6 module
    Use Cases
      Page loading state
      Upload indicator
      Form submission wait
    Setup
      One npm install
      CDN option too
      Zero dependencies
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Show an animated loading indicator on a webpage while waiting for data to come back from a server.

USE CASE 2

Display a spinner during file uploads or long-running form submissions in a web app.

USE CASE 3

Customize spinner size, color, and line count to match your site's visual design.

Tech stack

JavaScriptCSSTypeScriptES6

Getting it running

Difficulty · easy Time to first run · 5min
Free to use in any personal or commercial project under the MIT license, just keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
Using spin.js, add a loading spinner to my HTML page that appears while a fetch() call is in progress and disappears automatically when the data loads. Show me the minimal code.
Prompt 2
I want to configure spin.js to show a large, blue spinner with 8 lines and attach it to a specific div on my page. Show me the Spinner options and how to start and stop it.
Prompt 3
Using spin.js as an ES6 module in a TypeScript project, show me the import statement, how to type the options, and how to attach and remove the spinner from the DOM.
Open on GitHub → Explain another repo

← fgnass on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.