How to make logo loader using javascript

Manideepgoud
Posted by Manideepgoud under JavaScript category on | Points: 40 | Views : 146
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>

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

Login to post response