6/3/2014 2:43:20 PM

Create a non-gif spinner ajax loading animation. This is a great script. This allows you to easily create a loading spinner on your website without having to worry about creating/downloading a gif. 

You can get the library here:


* jQuery is supported but not required.

<script type="text/javascript"> var spinOptions1 = { lines: 12, // 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 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 position: 'absolute' }; var spinTarget = document.getElementById('screen'); var spinner = new Spinner(spinOptions1); //*Note: the screen object in this example has a relative position. This allows the spinner to be placed centered within the screen object. function startSpinner() { spinner.spin(spinTarget); } function stopSpinner() { spinner.stop(); } </script> <div id="screen" style="position: relative;"> </div>