Loader using css to rotate the outer circle-CodePudding

I have an image like as shown below. I need to make the circle arrow rotation for to show as spinner before loading content in my react application.

I have done something like this using transform:rotate like as shown below

@keyframes antiClockwiseSpin {
   from  {
     transform: rotate(360deg);
  }
  to {
     transform: rotate(0deg);
   }    
}

.antiClockwiseSpin {
   animation-duration: 10s;
   animation-iteration-count: infinite;
   animation-name: antiClockwiseSpin;
   animation-timing-function: linear;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
}

<div >
  <div >
    <img  src="https://i.stack.imgur.com/8s5ds.png" alt="" width="120" height="120">
  </div>
</div>

But somehow the whole image is rotating, but what I want is to rotate only the circle. Please find the image of those separately as given if needed.

I would like to know if we can bring that circle even without image but via plain css

CodePudding user response：

you need transparent arrow image Give position: relative to the parent (person image) and position: absolute to the child element (transparent arrow),Then you can place it to top:0 left:0 for Overlaying.

CodePudding user response：

Do it like below:

.box {
  width: 120px; /* control the size */
  display: inline-grid;
}

.box img {
  grid-area: 1/1; /* images above each other */
  mix-blend-mode: darken; /* needed to remove the white background */
}

.box img:last-child {
  animation: r 2s linear infinite;
  transform-origin: 48% 47%;
}

@keyframes r {
  to {
    transform: rotate(-360deg)
  }
}

<div >
  <img src="https://i.stack.imgur.com/suvmP.png?s=256">
  <img src="https://i.stack.imgur.com/hMTmj.png?s=256">
</div>