EzDevInfo.com

spin.js doesn't show up during long running task, but does when I step through the debugger

I'm using spin.js during a long running processing task.

When I just run the task, the UI changes I make immediately before the task runs do not show during the task itself. However, when I manually step through through the process with the debugger, the UI updates as expected. What gives? I tried running a setTimeout on the long running function to give the UI time to update; no dice.

function updateGraphDisplay() {
    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };

    var spinner = new Spinner(opts).spin();
    $('#chart').append(spinner.el);

    // long running local computations (~4s)

    Highcharts.charts[0].series[0].setData(sentimentDataPoints);
    Highcharts.charts[0].series[1].setData(volumeDataPoints);

    spinner.stop();
}

spin.js - Cant remove the spinner?

cant seem to stop this spinner no matter what i try.

I have searched around for the way to do it but nothing i have tried works.

fiddle:

http://jsfiddle.net/gmvT4/5/

backup code:

var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius: 5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};

var target = document.getElementById('foo');

$(document).on('click', '#spin', function () {
var spinner = new Spinner(opts).spin(target);
});

$(document).on('click', '#stop', function () {
$("#foo").data('spinner').stop();
});

<div id="foo"></div>
<button id="spin">Spin!</button>
<button id="stop">Stop!</button>

Thanks for any help! Craig.

Loading spin.js with require.js

I recently started a Javascript project and I am now moving it to require.js. Everything worked fine so far except for the spin.js library. I get the following error message when I try to access anything spin.js related:

Uncaught ReferenceError: Spinner is not defined

My requirejs.config looks like this:

requirejs.config({

    baseUrl: 'js',

        paths: {
            'jquery': 'lib/jquery',
            'spin': 'lib/spin',
    },

    shim: {
        'jquery' : {
            deps: [],
        },

        'spin' : {
            deps: [],
            exports: 'Spinner'
        },
    }
});  

A sample module looks like this:

require(['spin'], 
    function(Spinner)
    {   
        new Spinner();
    }
);

I'm using the shim config because I have some other modules with dependencies. Everything else seems to be loading fine though. What am I missing here?

Edit:

As Alex pointed out my library inclusion was wrong. For everyone having troubles with understanding backbone.js and require.js I suggest this book, especially the chapter about modular development.

Load spinner for multiple items in ng-repeat angular spin.js

Plunker here: http://plnkr.co/edit/das1We3T9hY39x8R?p=preview

I have a list of items in my ng-repeat.

When one of these items is clicked/selected, They're removed from the left column and added to the right column. As they are placed in the right column a spinner should show.

I've not been able to get it to work as it does on my local build within the plunker but my specific problem is that the spinner only kicks off when the first item in the list is clicked.

It sort of behaves similarly in the plunker in that if you click the second item first and then the second, the spinner shows. However I need one spinner to show per item every time it is moved to the right column.

It must have something to do with the userState-{{$index}} and 'userState-'+user.id below

<li class="pull-right">
   <div dw-loading="userState-{{$index}}" 
        dw-loading-options="{overlay: true, text: '', 
           spinnerOptions: {length: 6, width:3, radius: 6}}">
       <a rel='nofollow' href="" ng-click="remove(sUser)">
          <i class="glyphicons remove inline"></i></a>
    </div>
 </li>




$scope.loadUsers = function(user) {
       $loading.start('userState-'+suspect.id);
   $timeout( function() {
           $loading.finish('userState-'+user.id);
       }, 3000)

     };

Thanks!

insert the spin.js spinner into a div?

just found spin.js and it seems like a life saver.

The question is how to i insert the spinner into my div?

I have a follow button, that when clicked i remove the background image and currently replace with a loader.gif.

How can i do the same but with spin.js?

I knocked up a quick example of jsfiddle:

http://jsfiddle.net/4XpHp/

I would like the spinner to be inside the red square div.

<div id="foo"></div>
<button id="spin"> Spin! </button>

var opts = {
  lines: 13, // The number of lines to draw
  length: 17, // The length of each line
  width: 8, // The line thickness
  radius: 21, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 58, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#fff', // #rgb or #rrggbb or array of colors
  speed: 0.9, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};

$("#spin").click(function(){
  var target = document.getElementById('foo');
  var spinner = new Spinner(opts).spin(target);
});

#foo {
    width: 50px;
    height: 50px;
    background-color: #f00;
}

Spin.js - Disabling element when loading

I am wanting to use the spin.js library when users are performing actions on my site but i am not seeing how or if it is possible to disable the element the spinner is on top of. for example, when my grid is loading i do not want the user clicking on anywhere on the grid itself.

thanks!

jQuery: force display of modified dom

I've run in to a problem trying to have a 'loading spinner' on my page which runs while a table is being sorted, especially for slower clients as can take up to 10 seconds to sort the page. I can see the DOM gets modified with the spinner code, however it does not display. I was hoping there may be something I can do to force this display of spinner before the sort happens, and of course stop it when the sort is completed.

My sort is based on 'sorttable.js' which I have modified to handle a secondary sort on the first column of table (with names in it).

My spinner uses 'spin.js'.

I'm still a novice with this jQuery stuff, and this sorttable code is rather involved. I highlight portions below, but my full modified sorttable code (for now) can be found at 'sorttable-TESTING-ONLY.js' with a test html page at 'TESTING-ONLY-sort_and_spin.htm'.

So, script sets up some functions when page loads ("....." means lines skipped):

makeSortable: function(table) {                          //line 75
  ......
  headrow = table.tHead.rows[0].cells;

  for (var i=0; i<headrow.length; i++) {                 //line 114
    .....
    headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);   //line 126

    // code to start/stop spinner
    headrow[i].sorttable_spinner = (function(val) {      //line 136
      return function(val) {
        var $this = $(this),
        data = $this.data();

        if (data.spinner) {
          data.spinner.stop();
          delete data.spinner;
        }
        if (val > 0) {
          var opts = {
            .......
           };
           data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
           // can see spinner added to DOM but does not display...
         }
    }})(i);

Code them creates a clickable event handler for column headers:

headrow[i].sorttable_columnindex = i;                            //line 171
headrow[i].sorttable_tbody = table.tBodies[0];

dean_addEvent(headrow[i],"click", function(e) {                  //line 176
   .... does some stuff with class names, etc

   this.sorttable_spinner(1);    // set spinner on             //line 224

   .... builds array to do sort then calls sort functions
   if (sort_direction == 'forward') {                            //line 247
     row_array.sort(this.sorttable_sortfunction); 
   } else {
     row_array.sort(this.sorttable_reversesortfunction);
   }

   tb = this.sorttable_tbody;
   for (var j=0; j<row_array.length; j++) {
     tb.appendChild(row_array[j][2]);
   }
   delete row_array;

   this.sorttable_spinner();  // now stop the spinner            //line 261

This all looks like it should be working. In Firefox with firebug I see the DOM get loaded with the spinner code, I see it rotating in the browser, and line to turn off spinner removes it from DOM. BUT, if I'm not in debug mode, only running it, then no spinner is displayed? (debugging with IE10 doesn't even display the spinner).

I tried .show() in various places but always get told not an available function. Saw a reference to window.setTimeout( function () {... to give seperate process for sort but couldn't understand how to implement that in this situation.

If anyone could give me some pointers that would be greatly appreciated.

Regards, Bryce S.

Spinner is not defined in Ladda with RequireJS

I am trying to place a ladda button on page rendered by backbone with require.js along with bootstrap components. However, I got

"Uncaught ReferenceError: Spinner is not defined".

I cut out the minified spin.js from the original ladda.js and put them in the same directory.

Shim'ed ladda as below:

require.config ({
   paths: {
            //jquery, underscore, backbone here
            spin : 'libs/ladda/spin',
            ladda: 'libs/ladda/ladda'
   },

   shim: {
        ladda: {
            deps: ['spin'],
            exports: 'Ladda'    
    }
}
});

In backbone view:

define([
  'jquery',
  'underscore',
  'backbone',
  'bootstrap',
  'spin',
  'ladda',
 ], function($, _, Backbone, Bootstrap, Spinner, ladda){
    render: function () {
        //templating

        console.log ('Spinner: ' + typeof Spinner);
        Ladda.create ($('button'));    
   }
});

I could see typeof Spinner is a function. Spinner.name property is "p". Shouldn't Spinner.name be "Spinner" instead of "p"? or "p" is inherit from minified variable?

What other steps I miss out to make Spinner visible in scope to ladda.js? Appreciate any advice render.

Thank you.

Update: Thanks to Bass Jobsen's advice, use hakimel committed spin.js, Spinner is loaded but error still persist. Below Chrome Dev Tool console:

Centering spin.js spinner inside a (target) div

I have the following simple markup and style (see JSFiddle):

Html:

<div id="wrapper"><div id="content"></div></div>    

CSS:

#content {
    background-color:lightyellow;
    height:200px;
    color:green;
}
#wrapper{
    border:1px solid black;
    color:red;
}

I'm setting the spinner target to the #content div using both Vanilla JS and jQuery options and I encounter a couple of problems. First, in both cases, the spinner does not appear to be constructed in the middle of the targeted element's parent, contrary to what the documentation says:

Positioning
Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually.

Second, when using Vanilla JS, the spinner does not use the color set on the target. When starting it using jQuery, it does (i.e. for #content it uses green).

Am I understanding the documentation wrong? If so, how can I center the spinner inside a specific element? If not, why isn't the snippet above centering the spinner inside the target?

How hidden spinner in spin.js ?

Please help me...

I want to use Spin.js to display a spinner. I can do it but i can't stop it.

My code :

function startSpin() {
    var target = document.getElementById('demarrer');
    new Spinner().spin(target);
    setTimeout("dummyFunc()", 4000);
    ????????????????????
}

function dummyFunc() {
    console.log("bouh");
}

What i have to complete on "??????????????????????" to stop the spinner please.

I tried : - Spinner().stop(target); - Spinner().spin(target).stop(); - Spinner().stop();

And no results... ='(

Thx a lot !

spin.js is not showing up on my site?

I am new to Javacript (very, very new) and I need to place a loading spinner on a site. We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. So, we wanted to place a spinner to make sure users would not continue to tap the screen.

I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test.

Here is the code I am using:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 1024px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
}
a,img,map,area {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
    </script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<a rel='nofollow' href="SITE URL"><img src="screen2.jpg" width="1024" height="768" border="0"></a>
    <div id="spinner">
    </div>
</body>
</html>

Any advice will be appreciated.

Make spin.js work with submit buttons

An issue thats been plaguing me for some time now. I cant get spin.js to work on submit buttons.

Heres a fiddle:

http://jsfiddle.net/xSDGx/24/

If you comment out the submit button and instead allow the div then it works fine.

Thanks.

For reference:

<input type="submit" id="spin">

var spinner;    
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius:5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '57%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('spin');
var spinner = new Spinner(opts).spin(target);
$(target).data('spinner', spinner);

spin.js won't work after a jquery each loop

I use spin.js to display a spin loader before my jquery each and stop it at the end of the loop. The problem is that the spin isn't display at all... result_table is an object with 4000 objects inside. I you know how to display this spin loader just after the submit action and fire it after the each loop it will be nice!

jQuery('#monForm').on('submit', function(e) {

    e.preventDefault(); 

    var opts = {
      lines: 13, // The number of lines to draw
      length: 20, // The length of each line
      width: 10, // The line thickness
      radius: 30, // The radius of the inner circle
      corners: 0.9, // Corner roundness (0..1)
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      color: '#000', // #rgb or #rrggbb or array of colors
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: '50%', // Top position relative to parent
      left: '50%' // Left position relative to parent
    };
    var target = document.getElementById('map');
    var spinner = new Spinner(opts).spin(target);
    if(target === null){
        var target2 = document.getElementById('spin');
        var spinner2 = new Spinner(opts).spin(target2);
    }

    jQuery.each(result_table, function(key, value) { 
        jQuery.each(value, function(v, i){
            if(v === select_lat_latlng){
                lat = i;            
            }
        });
    });

    if(target === null){
       spinner2.stop();
    } else {
       spinner.stop();
    }
}

spin.js with overlay DIV

I using JQuery plugin spin.js from http://fgnass.github.io/spin.js/.

This is my code with JQuery and a href click Ajax action.

My question is, it is possible add to the plugin overlay div?

Thank for help.

window.onunload = function(){};

 var opts = {
          lines: 11, // The number of lines to draw
          length: 15, // The length of each line
          width: 10, // The line thickness
          radius: 30, // The radius of the inner circle
          corners: 1, // Corner roundness (0..1)
          rotate: 0, // The rotation offset
          direction: 1, // 1: clockwise, -1: counterclockwise
          color: '#000', // #rgb or #rrggbb
          speed: 0.6, // Rounds per second
          trail: 60, // Afterglow percentage
          shadow: false, // Whether to render a shadow
          hwaccel: false, // Whether to use hardware acceleration
          className: 'spinner', // The CSS class to assign to the spinner
          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
        };

        var spinner = null;
        var spinner_div = 0;


       $(document).ready(function() {

       spinner_div = $('#spinner').get(0);          
       $("a.ajax").click(function(e) {
       e.preventDefault();
       var url = $(this).attr("href");


    $.get(url, function(data) {
        console.log(data); 

    });

    location.href =url;
    if(spinner == null) {
          spinner = new Spinner(opts).spin(spinner_div);
        } else {
          spinner.spin(spinner_div);
        }



    });

    });


<body>
<div id="spinner" class="spinner"></div>  
</body>

Yii2 with Spin.js to show activity after form submitted

I have been trying to use spin.js with Yii2 to show activity after submitting a form. The wait time can be as long as 5 seconds so therefore I need to show that the site is working.

I am able to display the spinner with:

<?= Spinner::widget() ?>

I would like to use the widget with DOM to start and turn it off on page load. My code is as below:

    spinr = {
        "start": function() {
            var target = $("body")[0];
            return "<?= Spinner::widget() ?>".(target);
        },
        "stop": function(spinner) {
            spinner.stop();
        }
    };

    $(document).ready(function() {
        // Once the DOM is loaded, start spinning
        spinner = spinr.start();
    });

    $(window).load(function() {
        // Once the page is fully loaded, stop spinning
        spinr.stop(spinner);
    });
</script> 

Thank you for any help.