Loading GIFs for individual images

I have a page full of images that take a while to load. Currently, there's just a blank space in their footprint while they load.

I'd like to instead insert a small custom loading icon gif to play for each image while it loads. Is this possible with CSS/HTML in Squarespace?

Thanks for any help! The page I'm working on is http://dillonbaker.com/#/spotlight/

Hi there.

One option is to add the gif as a background image on the image's containing element. When the image loads, it will cover up the gif (although the gif is still there, just not visible).

Something like this, added via the CSS Editor, substituting your own gif file:

.summary-thumbnail {
 background-image: url("https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif");
 background-position: center;
}

Or, here's another option using just CSS:

.sqs-block-summary-v2 * {
   position: relative;
   z-index: 1;
}

.summary-thumbnail:after {
 content: " ";
   height: 60px;
   width: 60px;
   -webkit-animation:spin 1s linear infinite;
   -moz-animation:spin 1s linear infinite;
   animation:spin 1s linear infinite;
   display: block;
   position: absolute;
   margin-left: auto;
   margin-right: auto;
   top: 40%;
   left: 45%;
   border-top: 0.2em solid rgba(200, 200, 200, 0.5);
   border-right: 0.2em solid rgba(200, 200, 200, 0.5);
   border-bottom: 0.2em solid rgba(200, 200, 200, 0.5);
   border-left: 0.2em solid #ffffff;
   border-radius: 50%;
}

@-moz-keyframes spin {100%{-moz-transform: rotate(360deg);}}
@-webkit-keyframes spin{100%{-webkit-transform: rotate(360deg);}}
@keyframes spin {100%{-webkit-transform: rotate(360deg); transform:rotate(360deg);}}

Do let me know if this works for you.

-Brandon

Exactly what I was looking for, works great! Thanks so much!

wow, great comment, thank u for ur help

Hi, you can replace preloader.gif by simply replacing the file you can get from here http://icons8.com/preloaders