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.
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);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 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 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.
An animated CSS3 loading spinner with VML fallback for IE.
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.
[2.3.2] - 2015-07-24
FAQs
A spinning activity indicator
We found that spin.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.