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 CSS3 loading spinner with VML fallback for IE.

• No images, no external CSS
• No dependencies
• Highly configurable
• Resolution independent
• Uses VML as fallback in old IEs
• Uses @keyframe animations, falling back to setTimeout()
• Works in all major browsers, including IE6
• Small footprint (~1.9K gzipped)
• MIT License

Usage

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

[2.0.0] - 2014-03-13

Changed

• Spinner is now absolutely positioned at top: 50%, left: 50% by default.
• top and left options now require CSS units. For example, top: 100 must instead be written as top: '100px'.
• Spinner must now always be invoked as constructor.