How to Create Loading using css and javascript

page loader jquery examples
page loader jquery examples
page loader jquery example

Today in this article we will learn how to create page loader effect during page load by using html css and javascript.

here we will learn how to create page loading untill page load step by step.

Step-1

First Of All add this html code on your page where you want to show loading effect.

 <div id="myloader" class="loader">
        <div class="loader_img">
            <div class="lds-hourglass"></div>
        </div>
    </div>

Step-2

Add these css code in your css file

<style>
.loader {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1000000000000000;
    background-color: rgba(0, 0, 0, 0.8);
}

.loader_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-hourglass:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 32px solid #ffcc01;
        border-color: #ffcc01 transparent #fff transparent;
        animation: lds-hourglass 1.8s infinite;
    }

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}
</style>

Step-3

Now last and final step add javascript code. Add this javascript code in bottom of your body.

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
$(window).load(function(){
    $('#myloader').fadeOut();
});
</script>
Top Electronic Gadgets

Leave a Reply

avatar
  Subscribe  
Notify of