spin.js

What is spin.js?

spin.js is a JavaScript library that allows you to create and control animated loading spinners. It is highly customizable and can be used to indicate loading states in web applications.

What are spin.js's main functionalities?

Create a Basic Spinner

This code creates a basic spinner with default options and attaches it to a target element with the ID 'spinner-container'.

const Spinner = require('spin.js');
const opts = { lines: 12, length: 7, width: 5, radius: 10, scale: 1.0, corners: 1, color: '#000', opacity: 0.25, rotate: 0, direction: 1, speed: 1, trail: 60, fps: 20, zIndex: 2e9, className: 'spinner', top: '50%', left: '50%', shadow: false, hwaccel: false, position: 'absolute' };
const target = document.getElementById('spinner-container');
const spinner = new Spinner(opts).spin(target);

Customize Spinner Options

This code demonstrates how to customize various options of the spinner, such as the number of lines, length, width, radius, color, speed, and more. The spinner is then attached to a target element with the ID 'custom-spinner-container'.

const Spinner = require('spin.js');
const opts = { lines: 13, length: 20, width: 10, radius: 30, scale: 1.5, corners: 1, color: '#ff0000', opacity: 0.5, rotate: 0, direction: 1, speed: 2, trail: 80, fps: 30, zIndex: 2e9, className: 'custom-spinner', top: '50%', left: '50%', shadow: true, hwaccel: true, position: 'fixed' };
const target = document.getElementById('custom-spinner-container');
const spinner = new Spinner(opts).spin(target);

Stop the Spinner

This code creates a spinner and stops it after 5 seconds using the `stop` method.

const Spinner = require('spin.js');
const opts = { lines: 12, length: 7, width: 5, radius: 10, scale: 1.0, corners: 1, color: '#000', opacity: 0.25, rotate: 0, direction: 1, speed: 1, trail: 60, fps: 20, zIndex: 2e9, className: 'spinner', top: '50%', left: '50%', shadow: false, hwaccel: false, position: 'absolute' };
const target = document.getElementById('spinner-container');
const spinner = new Spinner(opts).spin(target);
// Stop the spinner after 5 seconds
setTimeout(() => { spinner.stop(); }, 5000);

Other packages similar to spin.js

react-loader-spinner

react-loader-spinner is a collection of customizable React components for loading spinners. It offers a variety of spinner types and is specifically designed for React applications. Compared to spin.js, it provides more pre-built spinner options and is easier to integrate into React projects.

loaders.css

loaders.css is a collection of simple, animated loaders created with CSS. It offers a variety of loading animations that can be easily integrated into any web project. Unlike spin.js, loaders.css relies solely on CSS for animations, making it lightweight but less customizable in terms of JavaScript control.

nprogress

nprogress is a lightweight progress bar library for JavaScript. It provides a simple way to show a progress bar at the top of the page during AJAX requests or other asynchronous operations. While it does not offer spinners, it serves a similar purpose of indicating loading states, making it a good alternative for progress indication.

README

spin.js

An animated loading spinner

• No images
• No dependencies
• Highly configurable
• Resolution independent
• Uses CSS keyframe animations
• Works in all major browsers
• Includes TypeScript definitions
• Distributed as a native ES6 module
• MIT License

Installation

npm install spin.js

Usage

CSS

<link rel="stylesheet" href="node_modules/spin.js/spin.css">

TypeScript or JavaScript

import {Spinner} from 'spin.js';

var target = document.getElementById('foo');
new Spinner({color:'#fff', lines: 12}).spin(target);

For an interactive demo and a list of all supported options please refer to the project's homepage.

Changelog

[4.1.2] - 2024-07-19

Changed

• Removed some dead code left over from version 3.x.