Fully Customizable LOADING Animation - SPIN

Add-ons

2026-07-25 23:28 3 次浏览 • 0 次下载 34.3KB

Fully Customizable LOADING Animation - SPIN

Plugin description: Loading animations are something everyone has probably seen frequently. When we need to asynchronously load a piece of data from the server without refreshing the page, the process takes some time. During this period, the page may appear frozen, which should not be shown directly to users. In such cases, we use a loading animation to inform users that data is being loaded.

Loading animations are something everyone has probably seen frequently. When we need to asynchronously load a piece of data from the server without refreshing the page, the process takes some time. During this period, the page may appear frozen, which should not be shown directly to users. In such cases, we use a loading animation to inform users that data is being loaded.
A loading animation can be implemented using a pre-made animated GIF. However, this approach has one drawback: parameters such as the GIF's size and speed are fixed once created, making it troublesome to modify the animation.

So today I'd like to introduce a JS-based loading animation that allows you to customize various parameters during use. It is easy to deploy and very practical.

Usage Instructions

1. Include the following JS and CSS files. This plugin does not actually depend on the jQuery library; jQuery is included here only for convenience.

<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>

2. Add the following JS code inside the head tag

<script type="text/javascript">
$(function(){
    var opts = {
        // Parameter list       
    };
    var target = document.getElementById('foo');
    var spinner = new Spinner(opts).spin(target);
 })
</script>

3. Add the following HTML code inside the body tag. This is essentially a tag that uses the loading animation. Note that its id must match the id used when calling the function above.

<div id="foo"> 
</div>

Parameter Configuration
We define the spin parameters in the opts collection

 var opts = {
     lines: 13, // Number of small loading segments
     length: 7, // Length of each segment
     width: 4, // Width of each segment
     radius: 10, // Radius of the entire circle
     corners: 1, // Rounded corners of each segment; the larger the value, the rounder the corners
     rotate: 0, // Rotation angle of the loading animation; seemingly has no practical effect
     color: '#000', // Color
     speed: 1, // Animation speed
     trail: 60, // Percentage of the trailing glow
     shadow: false, // Whether to render shadows
     hwaccel: false, // Whether to enable hardware acceleration
     className: 'spinner', // CSS class name applied to the loading animation
     zIndex: 2e9, // The z-index (defaults to 2000000000)
     top: 'auto', // Top position relative to parent in px
     left: 'auto' // Left position relative to parent in px
};

Visual Parameter Editor

If you find it troublesome to modify parameters and preview the results every time, you can also configure the parameters visually on the official website. The effect will be displayed immediately whenever you reset a parameter.

====== The following code is provided by Bu ======

“2. Add the following JS code inside the head tagThis wording here may cause misunderstandings.

1	`var` `spinner =` `new` `Spinner(opts).spin(target);`

This statement initializes spin and directly invokes (displays) the loading animation. It may confuse beginners.

Suggested revision:

var opts = {
  // Parameter list...      
};
 
var target = document.getElementById('foo');
// Initialize spin - inside the initialization function
var spinner = new Spinner(opts);// It is recommended to declare spinner as a global variable for convenient access later.
 
// Show the progress animation
spinner.spin(target);
 
// Hide the progress animation
spinner.stop();// Not mentioned in the original text