Displaying Loading Image using CSS

Question

I currently have the following CSS code that I apply to a div element that displays a responsive image.

.my-img-container {
  position: relative;
  &:before {
    display: block;
    content: " ";
    background: url("https://lorempixel.com/300/160/") no-repeat;
    background-size: 100% 100%;
    width: 100% !important;
    padding-top: 56.25%;
  }
  >img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

<div class="my-img-container">
  <img srcset="https://lorempixel.com/540/304 540w, https://lorempixel.com/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://lorempixel.com/300/160">
</div>

What I'm trying to do is have an image display in the background while the responsive image is loading, hence the content in the CSS, but it's not working. Any idea why?

Solution 1

You can set the spinner as a background to the image:

html,
body {
  height: 100%;
  margin: 0;
}

img {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif) no-repeat center;
}

<img srcset="https://picsum.photos/540/304 540w, https://picsum.photos/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://picsum.photos/300/160">

Solution 2

Instead of loading a smaller image to show as a loader, simply rotate a pseudo element instead.

It has the benefit of being able to start much faster than an image and save an extra server call.

.my-img-container {
  position: relative;
  padding-top: 50%;
}
.my-img-container:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 2px solid red;
  border-color: transparent red transparent red;
  border-radius: 50%;
  animation: loader 1s linear infinite;
}
.my-img-container > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
@keyframes loader {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

<div class="my-img-container">
  <img src="https://picsum.photos/600/300">
</div>

Comments

[Nurul Huda]

it will be weird when we using object-fit: contain