Carregamento Smooth

by Felype Rennan

HTML

<div class="overlay-carregamento">
</div>
<img class="pre-carregar" src="http://img02.deviantart.net/18e9/i/2012/232/0/a/welcome_to_the_internet__please_follow_me_by_sharpwriter-d5buwfu.jpg" alt="Bem vindo Ă  internet" />

SCSS

body {
    font: "Lucida Sans", sans-serif;
}

.pre-carregar {
  opacity: 0;
}

.overlay-carregamento {
    opacity: 1;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: white;
    z-index: 100000;
    &:before {
        content: " ";
        width: 10vmin;
        height: 10vmin;
        left:14px;
        top: 14px;
        border: 2px solid #00829D;
        position: absolute;
        z-index: 100001;
        animation: girar 0.4s ease-in-out normal infinite;
    }
}
.overlay-carregamento.die:before {
    display: none;
}

JavaScript

$(document).ready(function() {
    $(".pre-carregar").removeClass("pre-carregar");
    $(".overlay-carregamento").addClass("die");
    $(".overlay-carregamento").fadeOut(1000, function() {
        $(this).remove();    
    });
});