spin.js with jquery.colorbox.js

HTML

<script src="http://fgnass.github.io/spin.js/dist/spin.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<body>
    <button id="colorbox-demo">Click Me</button>
</body>

CSS

img {
    max-width: 100%;
    height: auto;
}
#cboxSpinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

var options = {
    color: '#ed5f00',
    lines: 9,
    corners: 1,
    radius: 36,
    width: 8,
    length: 20,
    trail: 50
}

$('#colorbox-demo').colorbox({
    href: 'http://awpny.com/wp-content/uploads/2013/10/pictionhand-960x640.jpg',
    width: '100%',
    onOpen: function () {
        $('#cboxOverlay').after('<div id="cboxSpinner" />');
        var target = document.getElementById('cboxSpinner');
        new Spinner(options).spin(target);
    },
    onComplete: function () {
        $('#cboxSpinner').remove();
    }
});