Edit in JSFiddle

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();
    }
});
<body>
    <button id="colorbox-demo">Click Me</button>
</body>
img {
    max-width: 100%;
    height: auto;
}
#cboxSpinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

External resources loaded into this fiddle: