JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<script type='text/javascript' src="http://build-master.jaspersoft.com:6680/jrs-pro-feature-visualizejs/client/visualize.js"></script>

<div id="container"></div>

CSS

#container{
    height:600px;
    width:600px;
    border: 10px solid red;
    padding: 10px 11px 12px 13px;
    margin: 10px 11px 12px 13px;
}

JavaScript

var customOverlay = $("<div></div>").append($("<div></div>").css({
    margin: "15px auto 10px auto",
    width: 32,
    height: 32,
    background: "url('http://bit.ly/1lWxxrd') transparent"
})).append($("<div>Loading...</div>")).css({
    position: "absolute",
    top: 30,
    left: "calc(50% - 100px)",
    height: 100,
    width: 200,
    opacity: 1,
    "font-size": 24,
    "padding-top": 1,
    "text-align": "center",
    "background-color": "white",
    "box-shadow": "0 0 20px #aaa",
    "border-radius": 10
});

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    v("#container").report({
        resource: "/public/Samples/Reports/AllAccounts",
        //loadingOverlay: false,
        //loadingOverlay: "<div>My Custom Overlay</div>",
        loadingOverlay: customOverlay,
        error: handleError
    });
    function handleError(err){alert(err.message);}
});