How to make logo loader using javascript

Posted by Manideepgoud under JavaScript category on 11/20/2019 | Points: 40 | Views : 2335

Post Code |

Search Codes |

Code Home

Hi, In the Below code am trying to make image loader

<!DOCTYPE html>
<html>
<head>
<style>
div { 
   	width: 120px;
    height: 120px;
  	position: absolute;
    top: 0;
	
    
}
.test1{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) 0px -120px no-repeat;
}
.test2{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -120px -120px no-repeat;
}
.test3{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -240px -120px no-repeat;
}
.test4{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -360px -120px no-repeat;
}
.test5{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -480px -120px no-repeat;
}
.test6{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -600px -120px no-repeat;
}
.test7{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -720px -120px no-repeat;
}
.test8{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -840px -120px no-repeat;
}
.test9{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -960px -120px no-repeat;
}
.test10{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -1080px -120px no-repeat;
}
.test11{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -1200px -120px no-repeat;
}
.test12{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -120px 0px no-repeat;
}
.test13{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -240px 0px no-repeat;
}
.test14{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -360px 0px no-repeat;
}
.test15{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -480px 0px no-repeat;
}
.test16{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -600px 0px no-repeat;
}
.test17{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -720px 0px no-repeat;
}
.test18{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -840px 0px no-repeat;
}
.test19{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -960px 0px no-repeat;
}
.test20{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -1080px 0px no-repeat;
}
.test21{
	 background: url(https://i.ibb.co/YZyNQTZ/sprite-2x.png) -1200px 0px no-repeat;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	
	var counter = 0,
        divs = $('.test1, .test2, .test3,.test4,.test5,.test6,.test7,.test8,.test9,.test10,.test11,.test12,.test13,.test14,.test15,.test16,.test17,.test18,.test19,.test20,.test21');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 21; }) // figure out correct div to show
            .show(); // and show it

        counter++;
    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); // show next div
    }, 80); // do this every 10 seconds   

});
</script>
</head>
<body>
<div>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6"></div>
<div class="test7"></div>
<div class="test8"></div>
<div class="test9"></div>
<div class="test10"></div>
<div class="test11"></div>
<div class="test12"></div>
<div class="test13"></div>
<div class="test14"></div>
<div class="test15"></div>
<div class="test16"></div>
<div class="test17"></div>
<div class="test18"></div>
<div class="test19"></div>
<div class="test20"></div>
<div class="test21"></div>
</div>

</body>
</html>

Alert Moderator

Bookmark It

Comments or Responses

Posted by: Sheonarayan on: 11/20/2019 Level:HonoraryPlatinum | Status: [Administrator] | Points: 10

Good effort Manideepgoud, its loading nicely and animations are great.

However it would be good to explain the code, like the code of style, script block are doing what, what HTML div elements are for etc. So that it would be easy for readers to understand the code.

Thanks

Latest Code Snipptes