Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I created an object to control the spinning:</p> <pre><code>Rats.UI.LoadAnimation = { "start" : function(){ var opts = { lines : 13, // The number of lines to draw length : 7, // The length of each line width : 4, // The line thickness radius : 10, // The radius of the inner circle corners : 1, // Corner roundness (0..1) rotate : 0, // The rotation offset color : '#000', // #rgb or #rrggbb 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 : $(window).height()/2.5, // Manual positioning in viewport left : "auto" }; var target = $("body")[0]; return new Spinner(opts).spin(target); }, "stop" : function(spinner){ spinner.stop(); } }; </code></pre> <p>When the DOM is loaded, I start spinning:</p> <pre><code>$(document).ready(function(){ // Once the DOM is loaded, start spinning spinner = Rats.UI.LoadAnimation.start(); pageUI(); }); </code></pre> <p>When the entire page is loaded, I stop spinning:</p> <pre><code>$(window).load(function(){ // Once the page is fully loaded, stop spinning Rats.UI.LoadAnimation.stop(spinner); }); </code></pre> <p>What's the difference between <a href="https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready">window.onload vs $(document).ready()</a></p> <p>See the full code on my github repo: </p> <ul> <li><a href="https://github.com/seahrh/sgratrace/blob/master/war/js/rats.js" rel="nofollow noreferrer">https://github.com/seahrh/sgratrace/blob/master/war/js/rats.js</a></li> <li><a href="https://github.com/seahrh/sgratrace/blob/master/war/index.html" rel="nofollow noreferrer">https://github.com/seahrh/sgratrace/blob/master/war/index.html</a></li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload