Jump to content

Loading GIFs for individual images

Go to solution Solved by brandon,

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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.


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.