Html preloader with gif from URL

Question

I have this preloader code:

<div class="loading">
   <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>

How can I bring it to the center and hide after loading?

Answer 1

Edit this CSS and JS code to your application. And the preload should work properly.

<!--JS-->

$('section').hide();
        $(window).on({
            load: function () {
                $('.loader').hide();
                $('section').show();

            }
        })

<!--CSS-->

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
}

Answer 2

You can center easy using flex..

<style>
.loading {display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
}

.loading img {flex:1; margin: auto}

</style>

<div class="loading">
<img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>