Donut hover complete

by Saksham Malhotra

HTML

<div class="container">
  <div class="circle"></div>
</div>

CSS

body {
  background-color: #0a3d62;
}
.container {
  
}
.circle {
  position: absolute;
  background-color: #0a3d62;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  overflow:hidden;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content: center;
  box-shadow: -140px 0px 0px 5px #0a3d62, 0px 140px 0px 5px #0a3d62, 140px 0px 0px 5px #0a3d62, 0px -140px 0px 5px #0a3d62, 0px 0px 0px 5px #f6b93b;
}
.circle:hover {
  animation: donut 0.5s forwards linear;
}

@keyframes donut {
  0% {
    box-shadow: -140px 0px 0px 5px #0a3d62, 0px 140px 0px 5px #0a3d62, 140px 0px 0px 5px #0a3d62, 0px -140px 0px 5px #0a3d62, 0px 0px 0px 5px #f6b93b;
  }
  25% {
    box-shadow: -150px 150px 0px 5px #0a3d62, 0px 140px 0px 5px #0a3d62, 140px 0px 0px 5px #0a3d62, 0px -140px 0px 5px #0a3d62, 0px 0px 0px 5px #f6b93b;
  }
  50% {
    box-shadow: -150px 150px 0px 5px #0a3d62, 150px 150px 0px 5px #0a3d62, 140px 0px 0px 5px #0a3d62, 0px -140px 0px 5px #0a3d62, 0px 0px 0px 5px #f6b93b;
  }
  75% {
    box-shadow: -150px 150px 0px 5px #0a3d62, 150px 150px 0px 5px #0a3d62, 150px -150px 0px 5px #0a3d62, 0px -140px 0px 5px #0a3d62, 0px 0px 0px 5px #f6b93b;
  }
  100% {
    box-shadow: -150px 150px 0px 5px #0a3d62, 150px 150px 0px 5px #0a3d62, 150px -150px 0px 5px #0a3d62, -170px -240px 0px 5px #0a3d62, 0px 0px 0px 5px #f6b93b;
  }
}