Edit in JSFiddle

// Visualize: Cancel Report Execution  (5.6)

// This Fiddle uses a non-standard demo Report Unit:
//    /public/viz/Slow_Report/Slow_Report

var spinner = createSpinner();

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
   
    var button = $("button");
    
    var report = v.report({
        resource: "/public/viz/Slow_Report/Slow_Report",
        container: "#container",
        events: {
            changeTotalPages : function(){
               spinner.remove(); 
            }
        }
    });

    button.click(function () {
        report
            .cancel()
            .then(function () {
                spinner.remove(); 
                alert("Report Canceled!");
            })
            .fail(function () {
                alert("Can't Cancel Report");
            });
    });
});


function createSpinner() {
    var opts = {
        lines: 17, // The number of lines to draw
        length: 3, // The length of each line
        width: 2, // The line thickness
        radius: 3, // The radius of the inner circle
        corners: 0.6, // 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: 'auto', // Top position relative to parent in px
        left: 'auto' // Left position relative to parent in px
    };
    var container = $("#spinner");
    var spinner = new Spinner(opts).spin(container[0]);
    return container;
}

<!-- Visualize: Cancel Report Execution  (5.6)
  -->

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type='text/javascript' src="http://fgnass.github.io/spin.js/spin.js"></script>
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<div id="spinner"></div>
<button>Cancel</button>
<div id="container"></div>

#spinner{
    float: left;
    padding: 10px;
}