Problemas ao utilizar o FLUIGC.loading

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();
compartilhar
  • Encontrei uma solução bem simples para o problema. Adicionei essa linha dentro do arquivo javascript que fica no diretorio src/main/webapp/resources/js/seuarquivo.js

    Para mostrar o loading: $('#loading').removeClass('esconder');

    Para esconder o loading: $('#loading').addClass('esconder');

    OBS.: Utilizando o codigo do loading citado na pergunta.

    Richard Herald Galdino Ferreira   09 de Apr de 2017
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

3 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags loading fluigc wcm ou faça a sua própria pergunta.