How to create a image loader in minimal theme?

Highlighted
Tourist
14 0 0

Hi,

Can anybody help me out in creating a Image loader for slow internet connections? I am using minimal Theme. Like the below one with animation.

YesJayAhamed_0-1598709454102.png

 

 

Regards,

Junaid

0 Likes
Highlighted
Excursionist
334 50 77

Please set this code at the end of theme.scss

.loader {
background-color: #ffffff;
  border: 20px solid #f3f3f3;
  border-radius: 50%;
  border-top: 20px solid #ff66c4;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

 

Place this code inside body tag in theme.liquid

 

<div class="loader"></div>

 

And please this code inside script tag

 $(window).load(function(){
    $('.loader').fadeOut("slow");
 });

 

If you like this solution, please accept it as solution and please like

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Tourist
14 0 0

I am unable to find "script tag".  Could you please guide me where exactly is it located?

 

0 Likes
Highlighted
Excursionist
334 50 77

Did not you find script tag in theme.liquid file?

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
Tourist
14 0 0

Thank you. I got it. But the end result is not what I wanted. The loader is always there and its on every page all the time, Also Its a single loader for whole page, I wanted loader for indvidual images when they are loading and it should be gone when the image is loaded.

YesJayAhamed_0-1598801946830.png

 

YesJayAhamed_1-1598801985824.png

 

 

0 Likes