Boa tarde,

Estou criando uma Widget e senti a necessidade de colocar um Loading, pois a consulta está demorando mais do que o normal. Tentei seguir o exemplo do fluig style:

// Component construction by setting one div.
var myLoading1 = FLUIGC.loading('#YOUR-SELECTOR');
myLoading1.show();
// We can hide the message of loading
myLoading1.hide();

Porém o exemplo não funcionou de nenhuma maneira.

Então procurei um loading na internet e encontrei o codigo abaixo:

CSS

.overlay {
            background-color: #EFEFEF;
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 10000000;
            top: 0px;
            left: 0px;
            opacity: .5;
            /* in FireFox /
            filter: alpha(opacity=50);
            / in IE */
        }

        .throbber {
            display: block;
            width: 50px;
            height: 50px;
            margin: -10px;
            padding: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            border: 5px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-radius: 50%;
            color: #397CE9;
            background-color: transparent;
            animation: load 0.7s linear infinite;
        }

        @keyframes load {
            100% {
                transform: rotate(360deg);
            }

JS

        function disableScreen() {
            var elemento = document.getElementById("loading");
            elemento.classList.remove('esconder');
        }

        function enableScreen() {
            var elemento = document.getElementById("loading");
            elemento.className += " esconder";
        }

HTML

        <div id="loading" class="overlay esconder">
            <i class="throbber"></i>
        </div>

Testei o codigo no http://codepen.io/pen/ e funcionou tranquilamente.

Porém quando tentei implementar no Widget ele somente aparece no debug.

Alguém já se deparou com esse tipo de comportamento ? ou conseguiu utilizar o FLUIGC.loading ?

EDIT - 10/04/2017

Então acabei percebendo que somente no Chrome não está funcionando o loading, funciona no debug :(

Laércio Lourenço, qual seria a alternativa para mostrar o loading ? Porque estou utilizando dataset no WCM e pelo que eu vi o dataset chama uma função ajax para buscar as informações.

Pensei em ate ficar ouvindo todas as requisições ajax e chamar o loading quando entrar nela:

$(document).ajaxStart(function () {
    $("#loading").show();
});

$(document).ajaxComplete(function () {
    $("#loading").hide();
});

Também somente funciona no debug.

Leandro Souza Tentei implementar o código citado por você e não consegui colocar para executar. Tentei de diversas maneiras:

window.exemple2= FLUIGC.loading();
window.exemple2.show();

var example2= FLUIGC.loading(this.DOM);
example2.show();

var example2= FLUIGC.loading(#MyWidget);
example2.show();