Edit in JSFiddle

function generateOptions(element) {
    
    var maxSize = 96;
    
    var elementColor = getComputedStyle(element).getPropertyValue("color");
    var elementHeight = element.clientHeight;
    var elementWidth = element.clientWidth;
    
    var size = (elementHeight > elementWidth) ? elementWidth : elementHeight;
    
    if (size > maxSize) { size = maxSize; }
    
    var color = elementColor;
    var lines = 9;
    var length = 0;
    var radius = Math.round(size / 4);
    var speed = 1.4;
    var width = radius - 2;
    
    var options = {
        className: 'spinner',
        color: color,
        length: length,
        lines: lines,
        radius: radius,
        speed: speed,
        width: width
    };
    
    return options;
}

/*var defaultOptions = {
  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: '#fff', // #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: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};*/

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var box4 = document.getElementById('box4');

var options1 = generateOptions(box1);
var options2 = generateOptions(box2);
var options3 = generateOptions(box3);
var options4 = generateOptions(box4);

var spinner1 = new Spinner(options1);
var spinner2 = new Spinner(options2);
var spinner3 = new Spinner(options3);
var spinner4 = new Spinner(options4);

$('#buttonStart').click(function() {
    spinner1.spin(box1);
    spinner2.spin(box2);
    spinner3.spin(box3);
    spinner4.spin(box4);
});

$('#buttonStop').click(function() {
    spinner1.stop();
    spinner2.stop();
    spinner3.stop();
    spinner4.stop();
});

<div id="buttons">
    <button id="buttonStart">Start</button>
    <button id="buttonStop">Stop</button>
</div>
<div class="spinBox" id="box1"></div>
<div class="spinBox" id="box2"></div>
<div class="spinBox" id="box3"></div>
<div class="spinBox" id="box4"></div>

body { background: #F5F5F5; }
#buttons { margin: 6px 0; }
.spinBox { background: #E0E0E0; float: left;  margin: 6px 6px 0 0; }
#box1 { color: #6090b0; height: 128px; width: 128px; }
#box2 { background: #D0D0D0; color: #b06060; height: 60px; width: 128px; }
#box3 { color: #60b090; height: 24px; width: 24px; }
#box4 { clear: left; color: #606060; margin: 12px 0; height: 400px; width: 400px; }

.spinner { opacity: .85; }