About design and nearby

Javascript and CSS-powered Spinner: spin.js with Overlay

Posted: July 12th, 2016 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

The days of using images to provide the visual effects are over. Now we can create gradients, shadows, rounded corners, use animations with styles only. And spinner image is not the exception.

So if I need spinner for my project, I use spin.js by Felix Gnass usually.
javascript-powered spinner It’s highly configurable, resolution independent, uses VML as fallback in old IEs,
uses @keyframe animations, falling back to setTimeout().

Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.

The only thing I missed with this library was an overlay option – to cover the rest of the page and prevent a user from clicking any element while the required content is loading.

I decided to add a ‘div’ which appears while spinner is working and removed after content has been loaded:

  1. <div id="overlay"></div>
  2. <div id="waitSpinner"></div>


Style it:

  1.  /*overlay for spinner*/
  2.   #overlay {
  3.         display: none;
  4.         background-color:#fff;
  5.         position: fixed;
  6.         left:0;
  7.         top:0;
  8.         height:100%;
  9.         width:100%;
  10.         opacity: 0.5;
  11.         z-index:10000;
  12.  }

And my edited javascript:

  1. var spinner = null;
  2.     $(document).ready(function () {
  3.         $(document).ajaxStart(mySpinner(true)).ajaxStop(mySpinner(false));
  4.     });
  5.  
  6.     function mySpinner(isStart) {
  7.         var opts = {
  8.             lines: 13, // The number of lines to draw
  9.             length: 3, // The length of each line
  10.             width: 10, // The line thickness
  11.             radius: 30, // The radius of the inner circle
  12.             corners: 1, // Corner roundness (0..1)
  13.             rotate: 0, // The rotation offset
  14.             direction: 1, // 1: clockwise, -1: counterclockwise
  15.             color: '#333333', // #rgb or #rrggbb or array of colors
  16.             speed: 1, // Rounds per second
  17.             trail: 60, // Afterglow percentage
  18.             shadow: false, // Whether to render a shadow
  19.             hwaccel: false, // Whether to use hardware acceleration
  20.             className: 'spinner', // The CSS class to assign to the spinner
  21.             zIndex: 29, // The z-index (defaults to 2000000000)
  22.             top: '50%', // Top position relative to parent
  23.             left: '50%' // Left position relative to parent
  24.         };
  25.  
  26.         if (isStart && !spinner) {
  27.             spinner = new Spinner(opts).spin();
  28.             $('#waitSpinner').html(spinner.el);            
  29.             $('#overlay').show(); //overlay  
  30.         }
  31.         else if (spinner) {
  32.             setTimeout(function () {
  33.                 spinner.stop();
  34.                 spinner = null;
  35.                 $('#waitSpinner').remove();
  36.                 $('#overlay').remove(); //overlay  
  37.             }, 1000);  //timeout – just to show the spinner for a while
  38.         }
  39.     };

You can find standalone example here or download the package.

Share Button

Check Related Posts:


Leave a Reply


  • × eight = 48

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now