dataLoading

by Brynner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div data-loading="my-content">
  hide this :)
</div>

CSS

@keyframes rotate{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
.data-loading i::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f110";
    text-align: center;
    animation: 1.5s rotate linear infinite;
}
.data-loading {
    min-height: 200px;
}
.data-loading div {
    position: relative;
    width: 150px;
    margin: 0px auto;
    margin-top: 50px;
    padding-bottom: 5px;
    text-align: center;
}
.data-loading i {
    display: inline-block;
    width: 100%;
    height: 40px;
    font-style: normal;
    font-size: 30px;
}
.data-loading i::after {
    top: 0px;
    left: 62px;
}

JavaScript

$(document).ready(function () {
    /*
    Adiciona um elemento de loading imediatamente 
    dentro do elemento no qual menciona .use-loading
    */
    $('[data-loading]').each(function(){
        var thisLoading = $(this);
        var thisLoadingId = thisLoading.attr('data-loading');
        $('[data-loading="'+thisLoadingId+'"]').hide();
        thisLoading.before('<div class="data-loading" data-loading-id="'+thisLoadingId+'"><div><i></i><p>Carregando</p></div></div>');
    });
});

/* Show loading or not */
/*
dataloading() exibe ou oculta o loading do elemento que o invoca
# Parametros: 
- id: identificador do loading
- show: (true | false) - exibe ou esconde
- template: (true | false) - se o resultado depende de um template
*/
function dataLoading(id, show) {
    if (show) {
        $('[data-loading-id="'+id+'"]').show();
        $('[data-loading="'+id+'"]').hide();
    } else {
        $('[data-loading-id="'+id+'"]').hide();
        $('[data-loading="'+id+'"]').show();
    }
}