spin.js - Animated CSS3 Loading Spinner

spin.js - Animated CSS3 Loading Spinner
File Size: 102 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

spin.js is a high configurable js Loading Spinner library built with CSS3 and jQuery (or modernizr.js). It works in all major browsers with No images, no external CSS and no dependencies (jQuery is supported, but not required). You can customize the line, width, height,radius, corners, rotate, speed and other options.

Written in typescript and currently works as a vanilla JavaScript plugin.

You might also like:

Basic Usage (with jQuery library):

1. Create a container for the loading spinner.

<div id="preview1" class="preview"></div>

2. The CSS for the loading spinner.

.preview {
  background: #aaa;
  color: black;
  width: 220px;
  height: 220px;
  margin: 0 20px;
  float: left;
  border-radius: 10px;
}

3. Include jQuery library and spin.js on your web page

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

4. Call the plugin to activate the loading spinner.

$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};
$('#preview1').spin();

//Remove spinner upon click
$('.preview').click(function() {
  $(this).spin(false);
});

5. Possible plugin options to customizable your loading effect

var opts = {

    // The number of lines
    lines: 13, 

    // The length of each line
    length: 38, 

    // The width of each line
    width: 17, 

    // The radius of the inner circle
    radius: 45, 

    // Scales size
    scale: 1, 

    // Corner roundness (0..1)
    corners: 1, 

    // CSS color or array of colors
    color: '#ffffff', 

    // CSS color or array of colors
    fadeColor: 'transparent', 

    // Animation speed
    speed: 1,

    // Rotation offset
    rotate: 0, 

    // The CSS animation name for the lines
    animation: 'spinner-line-fade-quick', 

    // 1: clockwise, -1: counterclockwise
    direction: 1, 

    // z-index
    zIndex: 2e9,

    // The CSS class
    className: 'spinner', 

    // Top position relative to parent
    top: '50%', 

    // Left position relative to parent
    left: '50%', 

    // Box-shadow
    shadow: '0 0 1px transparent', 

    // Element positioning
    position: 'absolute' 
    
};

More Examples:

Changelog:

v4.0.0 (2018-07-11)

  • Updated to the latest version

This awesome jQuery plugin is developed by fgnass. For more Advanced Usages, please check the demo page or visit the official website.