CODEWITHSUNDEEP
htmlcss
uberchemist
uberchemist

Reputation: 29

Adding style attributes to image called from another style

This is to add a spinning/loading icon for images as they load.

The existing code I'm using calls up an animated .gif image as a background image "behind" an image thumbnail, so the loading icon is visible until the thumbnail loads on top. But I want to replace the .gif with a higher quality .png and add CSS to make it rotate. It's a much cleaner look, but I don't know how or if I can add CSS style to background: url(img/loading.png)

Here's the original HTML code:

<div style="position: absolute; display: block; background: url(img/loading.png) no-repeat center center; top: 0px; left: 0px; width: 25%; height:25%;">

I want to add this CSS code to the .png to make it rotate:

.loading {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
@-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);
    }
}

What's the best way to combine these to make my background .png image rotate?

Upvotes: 1

Views: 466

Answers (2)

Taj Melic
Taj Melic

Reputation: 33

You didn't add the class which your animating to the HTML. In your CSS you have a class called "loading" but the HTML doesn't know what to animate. In your div before the style="" tag add class="loading" and it will work, other than that your CSS works.

Upvotes: 0

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

You can animate the div with the background, you just need to add the loading class to it and with a separate class to add the other styles to it like the background url, width, height, position etc...

.load-style {
  height: 64px;
  width: 64px;
  background: url(http://www.jasonkenison.com/uploads/blog/loading.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
}
.loading {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-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);
  }
}
<div class="loading load-style"></div>

Upvotes: 1

Related Questions