style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700');

body{
  padding: 0px;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #D5F2E3;
}

.circle-container{
  width: 150px;
  height: 150px;
  background: #E1E1E1;
  border-radius: 50%;
}

.circle-container .circle .item,
.circle-container .circle .fill{
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-container .circle .item{
  clip: rect(0px, 150px, 150px, 64px);
}

.circle-container .circle .item .fill{
  clip: rect(0px, 64px, 150px, 0px);
  background-color: #2892D7;
}

.circle-container .circle .item.layer-1,
.circle-container .circle .fill{
  transform: rotate(126deg);
  animation: fill ease-in-out 3s;
}

@keyframes fill {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(126deg);
  }
}

.inside-content{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #D5F2E3;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  line-height: 130px;
}