SOURCE

<div class="img_box">
<!-- <img src="https://img11.360buyimg.com/babel/s1580x830_jfs/t20260418/93778/7/37368/87943/643fb849F7290b7d7/968392c8f2e05a75.jpg!cc_1580x830.webp"> -->
<div class="p">

</div>
</div>

<div class="loading"></div>

.img_box {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    transition: 2s;
    margin: 50px auto;
    border: 4px solid #f4f6f7;
    border-top:  4px solid #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p {
    width: 90%;
    height: 90%;
    background-color: gold;
    border-radius: 50%;
}
.p::before{
    background-color: greenyellow;
    width:20px;
    height: 20px;
}

@keyframes myfirst {
    to {
        transform: rotate(360deg);
    }
}

img {
    width: inherit;
    height: inherit;
}

.img_box:hover {
    /* border-radius: 20px; */
    animation-name: myfirst;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: linear;
}

.loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px double #cdcdcd;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}