body{
  background: #eee;
  font-family: arial;
}
.circle{
  --width: 200px;
  --percent: 60;
  --deg: calc(360deg * calc(var(--percent) / 100));
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  margin: 0px auto;
  background-image: conic-gradient(red var(--deg), #ccc var(--deg));
  position: relative;
}
.circle-inside{
  --bar-width: 30px;
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #eee;
  width: calc(var(--width) - var(--bar-width));
  height: calc(var(--width) - var(--bar-width));
  align-items: center;
  justify-content: center;
  font-size: 32px;
}