JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<picture class="content">
  <source srcset="https://i.ibb.co/3pTbt57/ezgif-com-gif-maker.webp" type="image/webp">
  <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" class="img load">
</picture>

CSS

.content {
  display: block;
  position: relative;

}

.img {
  max-width: 100%;
  height: auto;
}

.load {
  /* background: transparent url('https://i.imgur.com/CwWzlbm.png') no-repeat center; */
}
.content:before {
  width: 50px;
  height: 50px;
  content: '';
  position: absolute;
  background: url('https://svgur.com/i/Wuf.svg');
  /* top: 50%; */
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: spin 2s linear infinite;
}

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