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();