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 class="wrapper">
<div class="box antiClockwiseSpin">
<img class="image" 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.
https://i.stack.imgur.com/hMTmj.png?s=256
https://i.stack.imgur.com/suvmP.png?s=256
I would like to know if we can bring that circle even without image but via plain css
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.
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 class="box">
<img src="https://i.stack.imgur.com/suvmP.png?s=256">
<img src="https://i.stack.imgur.com/hMTmj.png?s=256">
</div>