.ring
  .mask.left
    .progress
  .mask
    .progress
  .center hover
  

$lightgrey: #ddd;
$darkgreen: #202d25;
$midgrey: #bbb;
$white: #fff;

body {
  background: $lightgrey;
}
.ring {
  position: relative;
  margin: 2rem auto;
  width: 7rem;
  height: 7rem;
  background: $white;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transform-origin: center right;
  transform: rotate(-180deg);
  transition: transform 0.5s linear;
}
.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $darkgreen;
  transform-origin: center right;
  transition: transform 0.5s linear;
}
.center {
  position: relative;
  width: 6rem;
  height: 6rem;
  background: $midgrey;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress {
  transform: rotate(-180deg);
}
.ring:hover {
  .mask.left {
    transform: rotate(0deg);
  }
  .progress {
    transform: rotate(0deg);
  }
}